How to create a dynamic datetimepicker in JavaScript and Bootstrap?

Question

I am using a Bootstrap modal in which I have 1 alraedy created datetimepicker which is working correctly but when I add a dynamic div for datetimepicker

I shows an error- $(...).datetimepicker is not a function

eg. I pass id=#datetimepicker1 in this function:

    function assignTime(id){
//    alert(id);
    try {
        $(id).datetimepicker({

            format: 'HH:mm'
        });
    }
    catch(err) {
        alert(err.message);
    }
}

My JavaScript and CSS files are:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

Function to create dynamic div is:

function addSlotTab(dt){
//    alert(window.allslots);
    var slots=window.allslots;
    var  start="slot"+dt;
//    alert(start);
if (slots.indexOf(start+'1')<0)
{
    id=dt+'1';
    window.allslots.push(start+'1');
}else if(slots.indexOf(start+'2')<0)
    {
        id=dt+'2';
        window.allslots.push(start+'2');

    }else if (slots.indexOf(start+'3')<0)
    {
        id=dt+'3';
        window.allslots.push(start+'3');
    }else{
        showDlg('Error!','You can add maximum 3 time slots for 1 day.');
    return;
}
//    alert(window.allslots);
 var html= "<div class='col-xs-10 col-sm-4' id='slot"+id+"'>";
    html+= "<div class='col-xs-12'>";
    html+= " <input type='text' class='col-lg-12 modal_input ' id='name"+id+"' style='margin-left: 25px;'>";;
    html+= "</div>";
    html+= " <div class=' col-sm-1' style='margin: 8px -27px 0 0px;float:left;    z-index: 1;'>";
    html+= "  <p class='glyphicon glyphicon-minus' onclick='removeTimeSlot("+id+")'></p>";
    html+= "    </div>";

    html+= "   <div class='col-xs-10'>";
    html+= " <div class='col-xs-6 col-md-6 col-lg-6 col-sm-6  '>";
    html+= "  <div class='input-group date ' id='datetimepicker"+id+"0'>";
    html+= "  <input type='text' class='form-control input'  style='min-width:65px;' name='st"+id+"'  id='st"+id+"' disabled/>";
    html+= "  <span class='input-group-addon'>";
    html+= "  <span class='glyphicon glyphicon-time'></span>";
    html+= "  </span>";
    html+= "   </div>";
    html+= "   </div>";
    html+= "    <div class='col-xs-6  col-md-6 col-lg-6 col-sm-6 col-sm-push-2'>";
        <!--                                  <input   type='time' name='end'  id='end1' disabled> -->


    html+= " <div class='input-group date datepick' id='datetimepicker"+id+"1'>";
    html+= "  <input type='text' class='form-control input'   style='min-width:65px'  name='end"+id+"'  id='end"+id+"' disabled/>";
    html+= "   <span class='input-group-addon'>";
    html+= "   <span class='glyphicon glyphicon-time'></span>";
    html+= "  </span>";
    html+= "   </div>";


    html+= "   </div>";

    html+= "   </div>";

    html+= "    </div>";
           $('#day'+dt+'_time').append(html);



    $("#datetimepicker"+id+"0").bind("click", function() {
        alert( "User clicked on 'foo.'");
        assignTime("#datetimepicker"+id+"0");

    });






}

Help me out to craete dynamic datetimepicker not datepicker.