JavaScriptで入力欄を増やしたときにjQueryの日付入力がうまくいかない

前提・実現したいこと

氏名を選択し、日時と内容を入力する入力フォームを作成しています。
何人分入力するかわからないため、JavaScriptでボタンを押すと入力欄を増やすようにしたいと思います。

発生している問題・エラーメッセージ

入力欄を増やすことはできたのですが、日時の入力がうまくいきません。
日時の入力欄にはBootstrap-Material-Datepickerを使っているのですが、
下の方の入力欄をクリックして入力しても必ず一番上の入力欄に入力されてしまいます。

該当のソースコード

JavaScript
1$(function(){
2    $('#id_answer_at').bootstrapMaterialDatePicker({
3        format: 'YYYY-MM-DD HH:mm',
4        lang:"ja",
5    });
6});
7
8$(function(){
9    $('#answer_at_1').bootstrapMaterialDatePicker({
10        format: 'YYYY-MM-DD HH:mm',
11        lang:"ja",
12    });
13});
14
15$(document).on("click", ".add", function() {
16    var target = $(this).parent().parent();
17    // 入力値を消去する
18    var clone = target.clone(true);
19    clone[0].children[0].children['answer_name'][0].selectedIndex = 0;
20    // clone[0].children[1].children[0].value = '';  //日付は維持する
21    clone[0].children[2].children[0].value = '';
22    // idに付与するための行番号を取得
23    var row = Number(target.parent().children().length) + 1;
24    // カレンダーフォームにidを設定
25    clone[0].children[1].children.answer_at.id = "answer_at_" + String(row);
26    // data-dtpを削除
27    clone[0].children[1].children[0].removeAttribute('data-dtp');
28    // コピーを作成
29    clone.insertAfter(target);
30
31    // カレンダーイベントの再設定
32    $("#answer_at_" + String(row)).bootstrapMaterialDatePicker({
33        format: 'YYYY-MM-DD HH:mm',
34        lang:"ja",
35    });
36});
37
38$(document).on("click", ".del", function() {
39    var target = $(this).parent().parent();
40    if (target.parent().children().length > 1) {
41        target.remove();
42    }
43});

HTML
1<table class="table table-sm">
2    <thead>
3    <tr class="d-flex">
4        <td class="col-2" align="center"><b>氏名</b></td>
5        <td class="col-2" align="center"><b>日時</b></td>
6        <td class="col-7" align="center"><b>内容</b></td>
7        <td class="col-1" align="center">追加</td>
8    </tr>
9    </thead>
10    <tbody>
11        <div id="input_pluralBox">
12            <div id="input_plural">
13                <tr class="d-flex">
14                    <td class="col-2" align="center">
15                        <select name="answer_name" id="answer_name_1">
16                            <option value="">--------</option>
17                        </select>
18                    </td>
19                    <td class="col-2" align="center">
20                        <input type="text" name="answer_at" id="answer_at_1">
21                    </td>
22                    <td class="col-7" align="center">
23                        <textarea name="answer_content" style="width:100%;" rows="1"
24                                  id="answer_content_1"></textarea>
25                    </td>
26                    <td class="col-1" align="center">
27                        <input type="button" value="＋" class="add pluralBtn">
28                        <input type="button" value="－" class="del pluralBtn">
29                    </td>
30                </tr>
31            </div>
32        </div>
33    </tbody>
34</table>

試したこと

$("#answer_at_" + String(row)).bootstrapMaterialDatePicker({
format: 'YYYY-MM-DD HH:mm',
lang:"ja",
});
"#answer_at_" + String(row)をthisに変えてみたり

上の
$(function(){
$('#answer_at_1').bootstrapMaterialDatePicker({
format: 'YYYY-MM-DD HH:mm',
lang:"ja",
});
});
を消してみたり
https://teratail.com/questions/178377
を参考に試してみたりしましたが、うまくいきません。

補足情報（FW/ツールのバージョンなど）

最初にjquery-3.4.1.js、jquery-ui-1.12.1.js、bootstrap.css、bootstrap.bundle.js、
bootstrap-material-datetimepicker.css、moment.js、ja.js、bootstrap-material-datetimepicker.jsを読み込んでいます。
Microsoft Edgeを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように修正してみてください。

diff
1@@ -15,7 +15,7 @@ $(function(){
2 $(document).on("click", ".add", function() {
3     var target = $(this).parent().parent();
4     // 入力値を消去する
5-    var clone = target.clone(true);
6+    var clone = target.clone(false);
7     clone[0].children[0].children['answer_name'][0].selectedIndex = 0;
8     // clone[0].children[1].children[0].value = '';  //日付は維持する
9     clone[0].children[2].children[0].value = '';