jQuery clone() funktioniert nicht wie erwartet

Question

Ich habe folgende html-select-Element:

<div class="addmore_box_date"> 
    <div class="row"> 

     <div class="col-xs-6 col-sm-4 col-md-4">    
       <input type='text' name="add_date[]" class="form-control" id="add_date" placeholder="Select date"> 
      </div> 

      <div class="col-xs-6 col-sm-4 col-md-4"> 
      <select class="form-control add_time" id="add_time" name="add_time[]"> 
       <option value="">Select time</option> 
       <option value="12:00 Am">12:00 Am</option> 
       <option value="1:00 Am">1:00 Am</option> 
       <option value="2:00 Am">2:00 Am</option> 
       <option value="3:00 Am">3:00 Am</option> 
       <option value="4:00 Am">4:00 Am</option> 
       <option value="5:00 Am">5:00 Am</option> 
       <option value="6:00 Am">6:00 Am</option> 
       <option value="7:00 Am">7:00 Am</option> 
       <option value="8:00 Am">8:00 Am</option> 
       <option value="9:00 Am">9:00 Am</option> 
       <option value="10:00 Am">10:00 Am</option> 
       <option value="11:00 Am">11:00 Am</option> 
       <option value="12:00 Pm">12:00 Pm</option> 
       <option value="1:00 Pm">1:00 Pm</option> 
       <option value="2:00 Pm">2:00 Pm</option> 
       <option value="3:00 Pm">3:00 Pm</option> 
       <option value="4:00 Pm">4:00 Pm</option> 
       <option value="5:00 Pm">5:00 Pm</option> 
       <option value="6:00 Pm">6:00 Pm</option> 
       <option value="7:00 Pm">7:00 Pm</option> 
       <option value="8:00 Pm">8:00 Pm</option> 
       <option value="9:00 Pm">9:00 Pm</option> 
       <option value="10:00 Pm">10:00 Pm</option> 
       <option value="11:00 Pm">11:00 Pm</option> 
      </select>         
     </div>      
    </div>          
    <br/> 
</div>          
<label for=""><a id="addmoredate">Add more date & time</a></label> 

Es gibt Link mehr Datum und Zeit mit dieser ID addmoredate

So hierfür hinzufügen Ich bin mit Nach dem JQuery-Code, aber das erste Mal, dass es ein select-Element hinzufügt. Es ist okey, aber zweites Mal, wenn ich mehr dann fügen Sie es, indem 3 wählen Sie Elemente, aber es sollte zum 1 von 1.

var max_fields  = 30; //maximum input boxes allowed 
var wrapper   = $(".addmore_box_date"); //Fields wrapper 
var add_button  = $("#addmoredate"); //Add button ID 

$('#add_date').datetimepicker({  
    timepicker:false, 
    format:'Y-m-d', 
    formatDate:'Y/m/d', 
    minDate:'-1970/01/02', // yesterday is minimum date 
    maxDate:'+2017/12/01', // and tommorow is maximum date calendar  

});  

var x = 1; //initlal text box count  
$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 

    if(x < max_fields){ //max input box allowed   
     x++; //text box increment 


     $(wrapper).append("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></span>"); 

     if(x == 2) { 
     var y = x+1; 
     $('select.add_time').clone().attr('class', 'add_time'+y).appendTo('.new_select'); 
     } else {    
     alert(x); 
     $('select.add_time'+x).clone().attr('class', 'add_time'+x).appendTo('.new_select'); 
     } 


    $('#add_date'+x).datetimepicker({  
     timepicker:false, 
     format:'Y-m-d', 
     formatDate:'Y/m/d', 
     minDate:'-1970/01/02', // yesterday is minimum date 
     maxDate:'+2017/12/01', // and tommorow is maximum date calendar     
    });  

    } 
}); 

Zum ersten Mal hinzufügen, werden es so Angezeigt:

Aber das zweite Mal ist es mehr hinzufügen mehr Element anstelle von 1

Answer 1

Weil jedes Mal wenn Sie an dieses Element sind Anfügen von der Klasse basiert, die auf jeder Zeile geklont wurde und es so auch diese auf anderen Zeilen zu finden und fügt sie dort auch

.appendTo('.new_select'); 

Versuchen Sie, diese

$(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 

    if(x < max_fields){ //max input box allowed   
     x++; //text box increment 

     var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></span>"); 

     /* if(x == 2) { 
      var y = x+1; 
      newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'add_time'+y)); 
     } else {    
      //alert(x); 
      newRow.find('.new_select').append($('select.add_time'+x).clone().attr('class', 'add_time'+x)); 

     }*/ 

     newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'add_time'+x)); 
     $(wrapper).append(newRow); 

    } 
}); 

Example Fiddle

Answer 2

<script> 
$(document).on("click", "#addmoredate", function(){ 
    add_more($(".row:last")); 
}); 
function add_more(evt) 
{ 
    var curr = evt; 
    var item = $(curr).clone(true); 
    $(curr).parent().append("<br/>").append(item).show(); 
} 
</script>