Q:

jQuery Datepicker is not working for append

I have this problem when I'm trying to display a number of fields (tests, date, time), and onclick on those datepicker is supposed to run and disable the past dates, if I put the code outside the JavaScript it works just fine, so there must be something wrong with how I $.each loop it or with the append, but somehow I am not getting it to work
<script type = "text/javascript" >
    $(document).ready(function() {
        $("#select_test").change(function() {
            var optionVal = [];
            $.each($("#select_test option:selected"), function() {
                if ($.inArray($(this).text(), optionVal) == -1) {
                    optionVal.push($(this).text());
                }
            });
            var myselect = $('<select>');
            var mydiv = $('<div>');
            $.each(optionVal, function(index, key) {
                mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
            });
            $('#testsdetails').empty().append(mydiv.html());
        });
    }); 
</script>

I have called datepicker in below script.
<script>
   $(document).on('click', '.dates', function() {
    var dateToday = new Date();
    $(this).datepicker({
        minDate: 0
    }).focus();
    $(this).removeClass('datepicker');
});
</script>

A:

I have been unable to replicate an issue with the code you provided.

$(document).ready(function() {
  $("#select_test").change(function() {
    var optionVal = [];
    $.each($("#select_test option:selected"), function() {
      if ($.inArray($(this).text(), optionVal) == -1) {
        optionVal.push($(this).text());
      }
    });
    var myselect = $('<select>');
    var mydiv = $('<div>');
    $.each(optionVal, function(index, key) {
      mydiv.append("<tr><td><h5 class='wizard-title'>" + key + "</h5></td><td> <div class='col-sm-10'><div class='input-group date' data-provide='datepicker' data-date-format='dd-mm-yyyy'><input type='text' class='form-control datepicker dates' id='data-date' placeholder='Enter Test Date' name='testdate[]' value=''><div class='input-group-addon'><span class='glyphicon glyphicon-th'></span></div></div></div></td><td><div class='col-sm-12'><select name='testtime[]' class='form-control'><option value=''>Select Time</option><option value='0:00'>0:00</option><option value='1:00'>1:00</option><option value='2:00'>2:00</option><option value='3:00'>3:00</option><option value='4:00'>4:00</option><option value='5:00'>5:00</option><option value='6:00'>6:00</option><option value='7:00'>7:00</option><option value='8:00'>8:00</option><option value='9:00'>9:00</option><option value='10:00'>10:00</option><option value='11:00'>11:00</option><option value='12:00'>12:00</option><option value='13:00'>13:00</option><option value='14:00'>14:00</option><option value='15:00'>15:00</option><option value='16:00'>16:00</option><option value='17:00'>17:00</option><option value='18:00'>18:00</option><option value='19:00'>19:00</option><option value='20:00'>20:00</option><option value='21:00'>21:00</option><option value='22:00'>22:00</option><option value='23:00'>23:00</option></select></div></td></tr>");
    });
    $('#testsdetails').empty().append(mydiv.html());
  });
  $(document).on('click', '.dates', function() {
    var dateToday = new Date();
    $(this).datepicker({
      minDate: 0
    }).focus();
    $(this).removeClass('datepicker');
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<select id="select_test">
  <option></option>
  <option>1</option>
</select>
<div id="testsdetails"></div>

If you're still having an issue, please comment and provide more details. Let us know if you see any errors from Console. I suspect that this is a BootStrap page based on your HTML. 
Hope that helps.

