title: How do I clear input fields and select fields after cloning html elements via JavaScript?
body: <p>I have a form with multiple input fields and select options and I am using <code>cloneNode</code> to clone the entire div. </p>
  
  <p>What happens is when the input fields are set with values and select element is selected the clone also has the same values.</p>
  
  <p>now what I what to do is clear the input fields and reset the select element after the clone.</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 i = 0;
  function duplicate() {
    var original = document.getElementById('duplicater' + i);
    // console.log(original);
    var clone = original.cloneNode(true); // "deep" clone
  
    clone.id = "duplicater" + ++i; 
    original.parentNode.appendChild(clone);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/&gt;
  
  
  &lt;div class="bootstrap-iso"&gt;
   &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
     
      &lt;form method="post"&gt;
      &lt;div class="dynamicContainer"&gt;
              &lt;div id="duplicater0"&gt;
       &lt;div class="form-group "&gt;
        &lt;label class="control-label " for="name"&gt;
         Name
        &lt;/label&gt;
        &lt;input class="form-control" id="name" name="name" type="text"/&gt;
       &lt;/div&gt;
       &lt;div class="form-group "&gt;
        &lt;label class="control-label " for="message"&gt;
         Message
        &lt;/label&gt;
        &lt;textarea class="form-control" cols="10" id="message" name="message" rows="2"&gt;&lt;/textarea&gt;
       &lt;/div&gt;
       &lt;div class="form-group "&gt;
        &lt;label class="control-label " for="select"&gt;
         Select a Choice
        &lt;/label&gt;
        &lt;select class="select form-control" id="select" name="select"&gt;
         &lt;option value="First Choice"&gt;
          First Choice
         &lt;/option&gt;
         &lt;option value="Second Choice"&gt;
          Second Choice
         &lt;/option&gt;
         &lt;option value="Third Choice"&gt;
          Third Choice
         &lt;/option&gt;
        &lt;/select&gt;
       &lt;/div&gt;
       
       &lt;/div&gt;
  &lt;/div&gt;
       &lt;div class="form-group"&gt;
        &lt;div&gt;
         &lt;button class="btn btn-primary " name="submit" type="submit"&gt;
          Submit
         &lt;/button&gt;
         &lt;a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default"&gt;Add More&lt;/a&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/form&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>