title: how do i make the code differentiate between several buttons in my todoapp?
body: <p>hi so i am trying to make &quot;todoapp&quot; 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:</p>
  <pre><code>&lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;input type=&quot;text&quot; id=&quot;text&quot; value=&quot;&quot;&gt;
      &lt;button id=&quot;button&quot; type=&quot;button&quot; onclick=&quot;add()&quot;&gt;add&lt;/button&gt;
      &lt;div id=&quot;ss&quot;&gt;&lt;/div&gt;
      &lt;script&gt;
          function add(){
          document.getElementById(&quot;ss&quot;).innerHTML +=  document.getElementById(&quot;text&quot;).value + &quot;&lt;button id='edit' onclick='edit()'&gt;edit&lt;/button&gt;&quot;+&quot;&lt;button id='edit' onclick='del()'&gt;delete&lt;/button&gt;&quot;+&quot;&lt;br&gt;&quot;;
          }
          function edit(){
              document.getElementById(&quot;edit&quot;).outerHTML =  &quot;&lt;input type='text' id='etext' value=''&gt;&quot;+&quot;&lt;button id='done' onclick='done()'&gt;done&lt;/button&gt;&quot;;
          }
          function done(){
              document.getElementById(&quot;ss&quot;).innerHTML =  document.getElementById(&quot;etext&quot;).value + &quot;&lt;button id='edit' onclick='edit()'&gt;edit&lt;/button&gt;&quot;+&quot;&lt;button id='edit' onclick='del()'&gt;delete&lt;/button&gt;&quot;+&quot;&lt;br&gt;&quot;;;
          }
          function del(){
              document.getElementById(&quot;ss&quot;).innerHTML = &quot;&lt;div&gt;&lt;/div&gt;&quot;;
          }
      &lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;```
  </code></pre>