how do i make the code differentiate between several buttons in my todoapp?

hi so i am trying to make "todoapp" but it is not working as intended: if there are more then one task in a list edit and delete buttons are bugged. please help. how do i make the code differentiate between several tasks? my code:

<head>
</head>
<body>
    <input type="text" id="text" value="">
    <button id="button" type="button" onclick="add()">add</button>
    <div id="ss"></div>
    <script>
        function add(){
        document.getElementById("ss").innerHTML +=  document.getElementById("text").value + "<button id='edit' onclick='edit()'>edit</button>"+"<button id='edit' onclick='del()'>delete</button>"+"<br>";
        }
        function edit(){
            document.getElementById("edit").outerHTML =  "<input type='text' id='etext' value=''>"+"<button id='done' onclick='done()'>done</button>";
        }
        function done(){
            document.getElementById("ss").innerHTML =  document.getElementById("etext").value + "<button id='edit' onclick='edit()'>edit</button>"+"<button id='edit' onclick='del()'>delete</button>"+"<br>";;
        }
        function del(){
            document.getElementById("ss").innerHTML = "<div></div>";
        }
    </script>    
</body>
</html>```

Solution

Delegate and use a UL

const buttons = `<button type="button" class='edit'>edit</button> <button type="button" class="del">delete</button>`

const ul = document.getElementById("ss");
document.getElementById("add").addEventListener("click", function() {
  document.getElementById("ss").innerHTML += `<li>
      <span>${document.getElementById("text").value}</span> ${buttons}
    </li>`
})
ul.addEventListener("click", function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("edit") && !document.getElementById('etext')) {
    const li = tgt.closest("li")
    li.innerHTML = "<input type='text' id='etext' value='" + li.querySelector('span').textContent + "'><button type='button' class='done'>done</button>";
  } else if (tgt.classList.contains("done")) {
    tgt.closest("li").innerHTML = `${document.getElementById("etext").value} ${buttons}`
  } else if (tgt.classList.contains("del")) {
    tgt.closest("li").remove();
  }
})
document.getElementById("delAll").addEventListener("click", function() {
  ul.innerHTML = "";
})

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

<input type="text" id="text" value="">
<button id="add" type="button">add</button><button id="delAll" type="button">Delete all</button><hr/>
<ul id="ss"></ul>