title: cloned datepicker input not working
body: <p>I have a datepicker input ( jquery UI) as below</p>
  
  <pre><code>&lt;div class="row more-info-1"&gt;
  &lt;input class="pi-datepicker" type="text"&gt;
  &lt;/div&gt;
  
  &lt;a href="javascript:void(0)" onclick="addMoreDetails(1)"&gt;Add More&lt;/a&gt;
  </code></pre>
  
  <p>I need to clone this input multiple times , so my javascript is :</p>
  
  <pre><code>$('.pi-datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
  function addMoreDetails(nit_quotation_id) {
      $latest_div     = $('.more-info-'+nit_quotation_id+':last');  
  
      $latest_div.datepicker('destroy').removeAttr('id')
  
      $clone          = $latest_div.clone(false);
  
      $latest_div.after($clone);
      $clone.find('input.pi-datepicker')
        .removeClass('hasDatepicker')
        .removeData('datepicker')
        .unbind()
        .datepicker({ dateFormat: 'dd-mm-yy' });
  }
  </code></pre>
  
  <p>But when I clicked on the cloned input , the datepicker screen appears, but the value is changed in the first input box. Kindly check the <a href="https://jsfiddle.net/mascyaxa/4/" rel="nofollow noreferrer">FIDDLE</a></p>