title: appendChild onclick will only add div once
body: <p>I'm doing a timetable and to do list website. So, I basically add divs for each timetable block. I've used this tutorial on yt (<a href="https://youtu.be/MkESyVB4oUw" rel="nofollow noreferrer">https://youtu.be/MkESyVB4oUw</a>) for the timetable blocks. (At 24:03) So in HTML there's inputs in a form and he uses the constant &quot;form&quot; for it and uses an addEventListener submit. I've used this and all my timetable blocks work fine. I can add multiple blocks and everything works well.</p>
  <p>After that I made a to do / goals section and I decided to take the &quot;form&quot; into my own hands. So I did:</p>
  <pre><code>// I tried const and var and the same thing happened
  const todoAdd = document.querySelector(&quot;#new-todo&quot;);   // This is the button
  const weekDiv = document.querySelector(&quot;#week-divs&quot;);
  
  const todoDiv = document.createElement('div');
  todoDiv.classList.add(&quot;todo-div&quot;);
  </code></pre>
  <p>This is what I did for the time blocks and it worked, and then I added:</p>
  <pre><code>todoAdd.onclick = function(){
    weekDiv.appendChild(todoDiv);
  }
  </code></pre>
  <p>When I do it like this, the div is added once and that's it. If I keep clicking the div just gets replaced again and again.</p>