title: php javascript - add remove dynamic form (with datepicker input)
body: <p>i use some code to clone form elements but i dont know how it works with  with datepicker.</p>
  
  <p>Can someone update the code that i can use datepicker by input what can be clone? With query ui?</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>//define template
  var template = $('#sections .section:first').clone();
  
  //define counter
  var sectionsCount = 1;
  
  //add new section
  $('body').on('click', '.addsection', function() {
  
      //increment
      sectionsCount++;
  
      //loop through each input
      var section = template.clone().find(':input').each(function(){
  
          //set id to store the updated section number
          var newId = this.id + sectionsCount;
  
          //update for label
          $(this).prev().attr('for', newId);
  
          //update id
          this.id = newId;
  
      }).end()
  
      //inject new section
      .appendTo('#sections');
      return false;
  });
  
  //remove section
  $('#sections').on('click', '.remove', function() {
      //fade out section
      $(this).parent().fadeOut(300, function(){
          //remove parent element (main section)
          $(this).parent().parent().empty();
          return false;
      });
      return false;
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      
     &lt;div id="sections"&gt;
    &lt;div class="section"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;test form - &lt;a href="#" class='button red remove'&gt;delete&lt;/a&gt;&lt;/legend&gt;
          &lt;p&gt;
              &lt;label for="number1"&gt;number1:&lt;/label&gt;
              &lt;input type="text" name="number1[]"/&gt;
          &lt;/p&gt;
    
    &lt;p&gt;
  &lt;label for="number2"&gt;number2:&lt;/label&gt;
              &lt;input type="text" name="number2[]"/&gt;
          &lt;/p&gt;
    
    &lt;p&gt;
              &lt;label for="selcet1"&gt;selcet1:&lt;/label&gt;
    &lt;select name="select1[]" required&gt;
    &lt;option value="1" &gt;1&lt;/option&gt;
      &lt;option value="2" &gt;2&lt;/option&gt;
    &lt;/select&gt;
          &lt;/p&gt;
  
          &lt;p&gt;
  &lt;label for="selcet2"&gt;selcet2:&lt;/label&gt;
          &lt;select name="selcet2[]" required&gt;
     &lt;option value="1" &gt;1&lt;/option&gt;
        &lt;option value="2" &gt;2&lt;/option&gt;
     &lt;/select&gt;
          &lt;/p&gt;
  
  
    &lt;p&gt;
  &lt;label for="date"&gt;Date:&lt;/label&gt;
   &lt;input type="text" name="date[]" required /&gt; 
          &lt;/p&gt;
    &lt;p&gt;
              &lt;label for="text"&gt;text:&lt;/label&gt;
  &lt;textarea rows=3 type="text" name="text[]" &gt; &lt;/textarea&gt;
          &lt;/p&gt;
  
        
      &lt;/fieldset&gt;
   
    &lt;/div&gt;
  &lt;/div&gt;
  
         &lt;a href="#" class='addsection'&gt;add form&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I dont know how to add a datepicker by the 
  // input type="text" name="date[]" required // that i can clone and use.</p>
  
  <p>Please can someone help me that it works? </p>