title: Value in "input" filed becomes empty
body: <p>Hi Folks I'm new to JS World.</p>
  <p>I am trying to add A <code>&lt;div&gt;</code> dynamically to my HTML with the help of JavaScript.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = 0;
  function add_more_animals() {
      counter+=1;
      html = `&lt;div id="animal${counter}"&gt;
              &lt;input type="text" name="animalName${counter}"&gt;
              &lt;input type="text" name="animalType${counter}"&gt;
              &lt;/div&gt;`;
  
      var form = document.getElementById("animals");
      form.innerHTML+=html;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="animals"&gt;
          &lt;div id="animal0"&gt;
              &lt;input type="text" name="animalName0"&gt;
              &lt;input type="text" name="animalType0"&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type="button" onclick="add_more_animals()"&gt;Add animals (+)&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <h4>The issue I'm facing:</h4>
  <p>While I populate the fields of <code>animalName0</code> and <code>animalType0</code> on UI. After I click on <strong>add button</strong> so as to insert more animals data, new div is created as per JS logic written in file. But my earlier inputs to animalName0 &amp; animalType0 becomes empty &amp; I have to insert data there all over again.</p>
  <p>Can you please help here?</p>