JQuery - problema al duplicar datetimepicker

$(document).ready(function(){

  var maxField = 10; //limitacion de creacion de inputs, solo puede agregar hasta 10 inputs

  var Button_agregarInputs = $('.add_button'); //boton para agregar los inputs

  var wrapper = ('.horario-teorico'); //controla el div padre de todos los inputs

  var x = 1;//inicialmente comienza con 1, no puede ser menor que uno

  //var de campos a crear

  var id_horario = '<input type="hidden" name="id_horario" id="id_horario"> ';

  var clase = '<div class="col-2"><div class="form-group"><label for="clase">Clase</label><input type="text" name="clase" id="clase" required maxlength="25" class="form-control" value="Clase 1"></div></div>';

  var fecha_clase = '<div class="col-3"><div class="form-group"><label for="fecha_clase">Fecha</label><div class="form-group"><div class="input-group date" id="input-fecha-clase" data-target-input="nearest"><input type="text" class="form-control datetimepicker-input" data-target="#input-fecha-clase"/><div class="input-group-append" data-target="#input-fecha-clase" data-toggle="datetimepicker"><div class="input-group-text"><i class="fa fa-calendar"></i></div></div></div></div></div></div>';

  var hora_clase = '<div class="col-2"><div class="form-group"><label for="hora_clase">Hora</label><div class="input-group date" data-target-input="nearest"><input type="text" class="form-control datetimepicker-input"/><div class="input-group-append" data-target="#hora_clase" data-toggle="datetimepicker"><div class="input-group-text"><i class="fa fa-clock-o"></i></div></div></div></div></div>';

  var duracion_clase = '<div class="col-2"><div class="form-group"><label for="bloque">Duracion</label><div class="select2-blue"><select class="select2" name="bloque[]" id="bloque" data-placeholder="Duracion" data-dropdown-css-class="select2-blue" style="width: 100%;"></select></div></div></div>';

  var profesor_clase = '<div class="col-3"><div class="form-group"><label for="profesor">Profesor</label><div class="select2-blue"><select class="select2" name="profesor[]" id="profesor" data-placeholder="Profesor" data-dropdown-css-class="select2-blue" style="width: 100%;"></select></div></div></div>';

  $(Button_agregarInputs).click(function() {

    if (x < maxField) { //me revisa el max de inputs

      x++; //incrementa en 1 el contador

      $(wrapper).append(id_horario);//agregar input

      $(wrapper).append(clase);

      $(wrapper).append(fecha_clase);

      $(wrapper).append(hora_clase);

      $(wrapper).append(duracion_clase);

      $(wrapper).append(profesor_clase);

    }

  });

});