生成新行时的日期时间选择器崩溃

Question

的行中实现dateTimePicker

我正在尝试在生成

$(function() {
  $(document).on("click", '.btn-add-row', function() {
    var id = $(this).closest("table.table-review").attr('id'); // Id of particular table
    console.log(id);
    var div = $("<tr />");
    div.html(GetDynamicTextBox(id));
    $("#" + id + "_tbody").append(div);
    $(".prodName3").select2();
    $(".varName3").select2();
  });
  $(document).on("click", "#comments_remove", function() {
    $(this).closest("tr").prev().find('td:last-child').html('<button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button>');
    $(this).closest("tr").remove();

  });

  function GetDynamicTextBox(table_id) {
    //$('#comments_remove').remove();
    var rowsLength = document.getElementById(table_id).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length + 1;
    return '<td>' + rowsLength + '</td>' +
      '<td><select  name = "DynamicTextBox" class="select form-control prodName3" value = "" style="width:289.3px;"><option>Select</option><option>ProdDolar</option><option>ProdLBP</option><option>Souna</option></select></td>' +
      '<td><select  name = "DynamicTextBox" class="select form-control varName3" value = "" style="width:289.3px;"><option>Select</option><option>ProdLBPmmm1B3</option></select></td>' +
      '<td><input type="text" name = "DynamicTextBox" class="form-control" value = "mm" readonly></td>' +
      '<td><div class="cal-icon"><input class="form-control floating datetimepicker" name = "DynamicTextBox" type="text"></td>' +
      '<td><input type="text" class="form-control" name="DynamicTextBox" onkeyup = "javascript:this.value=Comma(this.value);" ></td>' +
      '<td><button type="button" class="btn btn-danger" id="comments_remove"><i class="fa fa-trash-o"></i></button></td>'


  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"  />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" integrity="sha512-WWc9iSr5tHo+AliwUnAQN1RfGK9AnpiOFbmboA0A0VJeooe69YR2rLgHw13KxF1bOSLmke+SNnLWxmZd8RTESQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js" integrity="sha512-x/vqovXY/Q4b+rNjgiheBsA/vbWA3IVvsS8lkQSX1gQ4ggSJx38oI2vREZXpTzhAv6tNUaX81E7QBBzkpDQayA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js" integrity="sha512-Y+0b10RbVUTf3Mi0EgJue0FoheNzentTMMIE2OreNbqnUPNbQj8zmjK3fs5D2WhQeGWIem2G2UkKjAL/bJ/UXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<div class="hidden" id="tableshow">
  <section class="review-section">
    <div class="row">
      <div class="col-md-12">
        <div class="table-responsive">
          <table class="table table-review review-table mb-0" id="table_achievements">
            <thead>
              <tr>
                <th style="width:40px;">#</th>
                <th>Product Name</th>
                <th>Variant Name</th>
                <th>Base Unit</th>
                <th>Effective Date</th>
                <th>Purchase Price</th>
                <th style="width: 64px;"><button type="button" class="btn btn-primary btn-add-row"><i class="fa fa-plus"></i></button></th>
              </tr>
            </thead>
            <tbody id="table_achievements_tbody">
              <tr>
                <th>1</th>
                <th>
                  <select class="form-control select" id="prodName" style="width:289.3px;">
                    <option>Select</option>
                    <option>ProdDolar</option>
                    <option>ProdLBP</option>
                    <option>Souna</option>
                  </select>
                </th>
                <th>
                  <select class="form-control" id="varName" style="width:289.3px;">
                    <option>Select</option>
                    <option>ProdLBPmmm1B3</option>
                  </select>
                </th>
                <th><input type="text" class="form-control" value="mm" readonly></th>
                <th>
                  <div class="cal-icon"><input class="form-control floating datetimepicker" type="text"></th>
                <!-- <input type="number" class="form-control" > -->
                <th><input type="text" class="form-control" name="Price" onkeyup="javascript:this.value=Comma(this.value);"></th>
                <th></th>
              </tr>
            </tbody>
          </table>
          </div>
        </div>
      </div>
  </section>
  </div>

添加了库SDFSDFSDFSDF SDFSD FSD FSD FSD FS DFS DFS DF SDF SDF FDS SFD F SD FSD FS D FSD FS