title: Cloned div disappears after appendChild
body: <p>I'm trying to add a duplicate function to clone and append a div. Here's the JS:</p>
  
  <pre><code>function NL(){
    var original = document.getElementsByClassName('form-block')[0];
    var clone=original.cloneNode(true);
    document.getElementsByTagName('form')[0].appendChild(clone);
  }
  
  document.getElementsByClassName('new-line')[0].addEventListener('click',NL);
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>&lt;form class='myform'&gt;
    &lt;div class='form-block'&gt;
      &lt;span class='line'&gt;1&lt;/span&gt;
      &lt;button class='new-line'&gt;New Line&lt;/button&gt;
      &lt;button class='new-nested'&gt;New Nested Line&lt;/button&gt;
      &lt;input class='input' type='text' placeholder='Enter Value...'&gt;
      &lt;button class='new-input'&gt;Add input&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/yzchen/pen/peZzEZ?editors=1011" rel="nofollow noreferrer" title="CodePen link">CodePen Link</a></p>
  
  <p>The idea is when you click the "New Line" button, a new 'form-block' is cloned and appended under the first one. But if you click on the "New Line" button now, the new block shows up briefly and then disappears. I can't figure out why.</p>
  
  <p>I can't modify anything in the HTML, and I can only use vanilla JS. </p>
  
  <p>Thanks!</p>