title: Preserve input values after dynamically adding an input field
body: <p>I'm making a form where it's possible to add extra input fields. Here's the code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper-comp-setting" id="flashcard-list"&gt;
          &lt;div class="fc-item"&gt;
            &lt;label class="label setting-label" for="flashcards"&gt;Flashcard (1)&lt;/label&gt;
            &lt;input class="input setting-input" name="front" id="front" placeholder="Front" type="text" /&gt;
            &lt;input class="input setting-input" name="back" id="back" placeholder="Back" type="text" /&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="button" id="more_fields" onclick="add_fields();" value="Add flashcard" /&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var fc_number = 1;
  function add_fields() {
      fc_number++;
      document.getElementById('flashcard-list').innerHTML += '&lt;div class="fc-item"&gt;&lt;label class="label setting-label" for="flashcards"&gt;Flashcard (' + fc_number + ')&lt;/label&gt; &lt;input class="input setting-input" name="front" id="front" placeholder="Front" type="text" /&gt;\n&lt;input class="input setting-input" name="back" id="back" placeholder="Back" type="text" /&gt;&lt;/div&gt;\r\n';
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hmxdmaL8/" rel="nofollow">http://jsfiddle.net/hmxdmaL8/</a></p>
  
  <p>My problem is that every time I add a new field the values from the previous fields disappear. How can I preserve those values?</p>
  
  <p>Thank you for reading.
  Cheers!</p>