title: Why is the text value duplicating when clicking on the add button JavaScript
body: <p>I'm doing a basic To-Do List project where the value from the text input must be added to a unordered list containing all the attributes of 3 hardcoded list items.</p>
  <p>I've gotten so far as to add the value from the input field to the list but every task after that duplicates. I'll add the code below. I'm fairly new to programming so excuse the code lol. Thanks in advance.</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;todo-area&quot;&gt;
          &lt;div class=&quot;add-area&quot;&gt;
              &lt;h1 id=&quot;list-name&quot;&gt;To-Do List&lt;/h1&gt;
              &lt;label for=&quot;todo&quot;&gt;&lt;/label&gt;
              &lt;input type=&quot;text&quot; name=&quot;todo&quot; id=&quot;input-task&quot;&gt;
              &lt;button type=&quot;submit&quot; id=&quot;add-task-button&quot; onclick=&quot;add()&quot;&gt;Add Task&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;list-area&quot;&gt;
              &lt;ul id=&quot;task-list&quot;&gt;
                  &lt;li class=&quot;li-input&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;check&quot;&gt;&lt;span class=&quot;task&quot;&gt;Email David&lt;/span&gt;&lt;button class=&quot;delete-btn&quot;&gt;X&lt;/button&gt;&lt;/li&gt;
                  &lt;li class=&quot;li-input&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;check&quot;&gt;&lt;span class=&quot;task&quot;&gt;Create ideal persona guide&lt;/span&gt;&lt;button class=&quot;delete-btn&quot;&gt;X&lt;/button&gt;&lt;/li&gt;
                  &lt;li class=&quot;li-input&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;check&quot;&gt;&lt;span class=&quot;task&quot;&gt;Set up A/B test&lt;/span&gt;&lt;button class=&quot;delete-btn&quot;&gt;X&lt;/button&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <pre><code>function add(){
      document.getElementById(&quot;add-task-button&quot;).addEventListener(&quot;click&quot;, function (event) {
          let textValue = document.getElementById(&quot;input-task&quot;).value;
          let tlist = document.getElementById(&quot;task-list&quot;);
          let newLi = `&lt;li class=&quot;li-input&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;check&quot;&gt;&lt;span class=&quot;task&quot;&gt;${textValue}&lt;/span&gt;&lt;button class=&quot;delete-btn&quot;&gt;X&lt;/button&gt;&lt;/li&gt;`;
          tlist.insertAdjacentHTML(&quot;beforeend&quot;, newLi);
          event.preventDefault();
      });
  }
  </code></pre>