title: Why do entered input values disappear when additional inputs are added with JavaScript?
body: <p>I have a simple form with two input fields. One for a product name
  and another one for a price. When I enter a product name as well
  as a product price and click on a button that adds 1 more field
  for another product and a price, another product field and price field
  are added but the entered input values becoming deleted...</p>
  
  <p>How can I keep the entered values in the input fields without being cleared?</p>
  
  <p>This is my JavaScript code:</p>
  
  <pre><code>&lt;script&gt;
  var total_products = 1;
  function add_fields() {
      var d = document.getElementById("products_services");
      total_products++;
      d.innerHTML += "&lt;div class=\"form-group\"&gt;&lt;label for=\"product"+total_products+"\" class=\"col-sm-4 control-label\"&gt;Product "+total_products+"&lt;/label&gt;&lt;div class=\"col-sm-6\"&gt;&lt;input type=\"text\" class=\"form-control\" name=\"product"+total_products+"\" placeholder=\"Product "+total_products+"\"&gt;&lt;/div&gt;&lt;/div&gt;";
      d.innerHTML += "&lt;div class=\"form-group\"&gt;&lt;label for=\"price"+total_products+"\" class=\"col-sm-4 control-label\"&gt;Price "+total_products+"&lt;/label&gt;&lt;div class=\"col-sm-6\"&gt;&lt;input type=\"text\" class=\"form-control\" name=\"price"+total_products+"\" placeholder=\"Price "+total_products+" (e.g. 479.59)\"&gt;&lt;/div&gt;&lt;/div&gt;";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;form class="form-horizontal" action="index.php" method="post"&gt;
  &lt;div id="products_services"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="product1" class="col-sm-4 control-label"&gt;Product 1&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;input type="text" class="form-control" name="product1" placeholder="Product 1"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="price1" class="col-sm-4 control-label"&gt;Price 1&lt;/label&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;input type="text" class="form-control" name="price1" placeholder="Price 1 (e.g. 479.59)"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
    &lt;div class="col-sm-offset-4 col-sm-6"&gt;
    &lt;button type="button" onclick="add_fields()" class="btn btn-default"&gt;Add 1 more Product&lt;/button&gt; &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>