Html Css javascript
<style> span { border: 0px solid; margin:0px 5px; } ul#namast li { border:1px solid #00000040; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" /> <form> <textarea id="isim" style="display:none;"></textarea> <input class="isi" id="isi" name="isi" type="text" onclick="nomor()" required/> <input class="tambah" onclick="tambah()" type="Submit" value="tambah" /> </form><br/> <w id="ctt2"></w> <ul id="namast" style="padding:0;margin:0;list-style:none;"> </ul> <script> let jedos = {} const namast = "STORAGE_JED" const box = document.querySelector('#namast') if(todofromlocal = localStorage.getItem(namast)) { jedos = JSON.parse(todofromlocal) for(let key in jedos) { createlist(key, jedos[key]) } console.log(jedos) } function synclocaldata(activity, item, status =false) { switch (activity) { case 'ADD': jedos[item] = status break; case 'UPDATE': jedos[item] = status break; case 'DELETE': delete jedos[item] break; default: break; } console.log(jedos) localStorage.setItem(namast, JSON.stringify(jedos)) return } function tambah() { let tgl = document.querySelector('#isim') let tex = document.querySelector('#isi') console.log(tgl) console.log(tex) let todo = "<li><span onclick='(thisue)'>"+ tgl.value +"</span> <span onclick='(thisue)'>"+ tex.value +"</span>" + "<span onclick='del(this)'> [X1] </span>" + "</li>" box.insertAdjacentHTML('afterbegin', todo) synclocaldata('ADD',tgl.value,tex.value) } function nomor(){ var nm = Number(localStorage.getItem("namast")); nm += 1; localStorage.setItem("namast", nm); var date = new Date(); var Dadate = date.getDate()+"/"+(date.getMonth()+1)+"/"+ date.getFullYear(); document.getElementById("isim").innerHTML = '('+nm+') '+Dadate+''; } function displaynamast() { const nm = localStorage.getItem('namast'); document.getElementById('ctt2').innerHTML = 'Catatan ke '+ nm +' <a href="" onclick="hapus()">Perbaharui Nomor</a>'; } displaynamast(); function createlist(tgl, tex1, status) { let isdone = (status) ? 'done' : '' let todo = "<li><span>"+ tgl +"</span>" + "<span onclick='del(this)' style='float:right;'> <i class='fa fa-trash'></i></span>"+"<span class='"+ isdone +"' onclick='(thisue)' style='margin-left:10px;'>Rp: "+ tex1 +"</span>" + "</li>" box.insertAdjacentHTML('afterbegin', todo) } function toggle(el) { let status = el.classList.toggle('done') synclocaldata('UPDATE', el.innerText, status) } function del(el) { el.parentElement.remove() synclocaldata('DELETE', el.previousElementSibling.innerText.trim()) } function hapus() { localStorage.removeItem('namast'); } </script>