jQuery clone() is not working as expected

Question

I have following 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>

There are link to add more date and time using this id addmoredate

So, for this I am using following JQuery code but first time it's adding one select element. It's okey but second time when I add more then it's adding 3 select elements but it's should be add 1 by 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                 
    });     

   }
});

First time it's showing like that :

But second time it's adding more more select element instead of 1

Answer 1

Because everytime you are appending to this element based on the class which got cloned on every row and so it find this on other rows as well and adds them there also

.appendTo('.new_select');

Try this

$(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>