【Rails5】　jqueryのdatepickerが効かない【Javascript】

前提・実現したいこと

フォーム入力で"＋"ボタンをクリックすることで、日付入力フォームを増やすようにしているのですが、二個目以降のフォームでフォーカスしてもdate-picker(カレンダー表示)が効きません。(1つ目は効きます)
何か原因がわかりましたらご教示いただければ幸いです。

該当のソースコード

View
1    .form-group.row
2      .col-sm-4
3        = f.label :日付
4        span.badge.badge-danger
5          | 必須
6        = f.button :＋, class: 'btn btn-primary rounded-circle p-0 addformbox pull-right', type: 'button'
7        = f.button :ー, class: 'btn btn-primary rounded-circle p-0 deleteformbox pull-right mt-6', type: 'button'
8        .box
9          = f.text_field :date, class: 'form-control date-picker required date_name', id: 'date', placeholder: '例） 2020/01/01', autocomplete: 'off'

↓フォームを3つに増やして生成されるhtml

<div class="box">
<input class="form-control date-picker required date_name hasDatepicker" id="date" placeholder="例） 2020/01/01" autocomplete="off" type="text" name="c_master[date]">
<input class="form-control date-picker required date_name hasDatepicker" id="date" placeholder="例） 2020/01/01" autocomplete="off" type="text" name="c_master[date]">
<input class="form-control date-picker required date_name hasDatepicker" id="date" placeholder="例） 2020/01/01" autocomplete="off" type="text" name="c_master[date]">                     
</div>

Javascript
1// カレンダー表示
2$(function() {
3  $(document).on('focus', '.date-picker', function () {
4      console.log($('.date-picker'));
5      $('.date-picker').datepicker();
6
7    });
8});
9
10$(function() {
11  // フォーム追加処理
12  $(".addformbox").click(function(){
13    var addformboxHtml = "";
14    addformboxHtml =  `<input class="form-control date-picker required date_name hasDatepicker" id="date" placeholder="例） 2020/01/01" autocomplete="off" onchange="changeDateFormColor();" type="text" name="c_master2[date][1]">`;
15
16    $(".box:last-child").append(addformboxHtml);
17
18    $(document).on('focus', '.date-picker', function () {
19        // console.log($(this));
20        $(this).datepicker();
21    });
22  });
23});

試したこと

bootstrap版のdatepickerも試してみましたが同様の現象が起こりました。

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

回答1件

ベストアンサー

hasDatepicker というclassを削除したら上手くいきました。
他にもおかしな点がいくつかありましたので、確認お願い致します。

idが被っている

idの値はページ内で一意である必要があります
2. nameが被っている
送信したあと入力した値をうまく取得できない可能性あり
3. 追加前のinputのnameと追加されるnameで一貫性がない
これは意図したものかもしれませんが。

HTML
1<div class="box">
2        <input class="form-control date-picker required date_name" id="date1" placeholder="例） 2020/01/01" autocomplete="off" type="text" name="c_master[date][1]">
3    </div>
4    <button class="addformbox">追加</button>
5    <script>
6    $(function() {
7        $(document).on('focus', '.date-picker', function () {
8            $('.date-picker').datepicker();
9        });
10    });
11    $(function() {
12        $(".addformbox").click(function(){
13            //c_master[date]から始まるinputの数をカウントして1足す
14            var num = $("input[name^='c_master[date]'").length+1;
15            //var numを使ってidとnameを一意になるようにセット
16            var addformboxHtml = '<input class="form-control date-picker required date_name" id="date'+num+'" placeholder="例） 2020/01/01" autocomplete="off" onchange="changeDateFormColor();" type="text" name="c_master[date]['+num+']">';
17            $(".box").append(addformboxHtml);
18            $(document).on('focus', '.date-picker', function () {
19                $(this).datepicker();
20            });
21        });
22    });
23    </script>