在克隆日期选择器在jQuery中不起作用

Question

这是我的代码，日期选择器在其中不起作用。

$(document).ready(function() {
  var html = '<div id="element3"><div class="form-row"><div class="form-group col-md-3"><label for="exampleSelect1" class="bmd-label-floating">Providers</label><select class="form-control" id="exampleSelect1" name="carprovider[]"><option value="">--Select Type--</option><option value="1">1</option></select></div></div><input type="hidden" name="id"><div class="form-row"><div class="form-group col-md-3"><label for="exampleTextarea" class="bmd-label-floating">Pick Up Date</label><input type="text" class="form-control" id="datepicker-22" name="pickupdate[]"></div></div><div class="form-row"><div class="form-group col-md-3"><label for="exampleTextarea" class="bmd-label-floating">Pick Up Time</label><input type="text" class="form-control" id="datepicker-23" name="pickuptime[]"></div></div><div class="form-row"><div class="form-group col-md-3"><label for="exampleTextarea" class="bmd-label-floating">Drop Date</label><input type="text" class="form-control" id="datepicker-24" name="dropdate[]"></div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleTextarea" class="bmd-label-floating">Drop Time</label><input type="text" class="form-control" name="droptime[]"> </div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleTextarea" class="bmd-label-floating">Car Hire Type</label><input type="text" class="form-control" name="carhiretype[]"></div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleTextarea" class="bmd-label-floating">Ref No.</label><input type="text" class="form-control" name="refno[]"></div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleSelect1" class="bmd-label-floating">Currency</label><select class="form-control" id="exampleSelect1" name="currency[]"><option>--Select Type--</option><option value="gb">GB</option></select></div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleTextarea" class="bmd-label-floating">B. Price</label><input type="text" class="form-control" name="bprice[]"></div></div><div class="form-row"><div class="form-group col-md-2"><label for="exampleTextarea" class="bmd-label-floating">Price</label><input type="text" class="form-control" name="price[]"></div></div><button type="button" class="btn btn-secondary" id="cancel14">Cancel</button></div>';

  var max = 5;
  var x = 1;
  $("#add14").click(function() {
    if (x <= max) {
      $("#element3").append(html);
      x++;
    }
  });

  $("#element3").on('click', '#cancel14', function() {
    $(this).closest('div').remove();
    x--;
  });
});