geklont picker Eingang nicht funktioniert

Question

Ich habe eine Datumsauswahl-Eingang (jquery UI) wie unten

<div class="row more-info-1"> 
<input class="pi-datepicker" type="text"> 
</div> 

<a href="javascript:void(0)" onclick="addMoreDetails(1)">Add More</a> 

Ich brauche diese Eingabe mehrfach zu klonen, so mein Javascript ist:

$('.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' }); 
} 

Aber als ich Wenn Sie auf den geklonten Eingang geklickt haben, wird der Bildschirm für den Datumsauswahl angezeigt, aber der Wert wird im ersten Eingabefeld geändert. Bitte überprüfen Sie die FIDDLE

Answer 1

Dies passiert, weil Ihre Eingabesteuerungen die gleiche ID (dd_date) haben. Aktualisieren Sie Ihre Eingabesteuerungs-ID für jedes Mal, wenn Sie wie unten auf "Weitere hinzufügen" klicken.

$clone.find('input.pi-datepicker') 
    .removeClass('hasDatepicker') 
    .removeData('datepicker') 
    .attr('id', 'dd_date' + Math.random()) //newly added line 
    .unbind() 
    .datepicker({ dateFormat: 'dd-mm-yy' }); 

Updated Fiddle DEMO