MW WP Form で日付ピッカーを複数設置すると正しく動作しない

Question

前提

ワードプレスにて、フォームプラグイン MW WP Form を用い、
日付ピッカーで予約希望日を第二希望まで出力しています。
機能的にはinput要素にクリックでカーソルが入ると、カレンダーが表示され、日付が選択できるよくあるタイプのものです。

わからないこと

第一希望は問題なくカレンダーが立ち上がり、選択できるのですが、
第二希望にカーソルを合わせると、第一希望の方に勝手に選択が移動し、うまく選べません。
該当ページ : http://yanagida-dc.ml/reservation/

JQuery UIのdatepickerを利用しているみたいですが、
1ページに複数使用する場合、何か個別に処理を行うような記述をしなければならないのでしょうか？

お詳しい方、ご教授お願い致します。

プラグインの設定画面で記述したコード

<tr> <th>予約希望日 第一希望</th> <td>[mwform_datepicker name="date1" js='"minDate": 0']</td> </tr> <tr> <th>予約希望日 第二希望</th> <td>[mwform_datepicker name="date2" js='"minDate": 0']</td> </tr> <tr>

実際に出力されるコード

<tr> <th>予約希望日 第一希望<span class="required-srt">必須</span></th> <td><input type="text" name="date1" size="30" value="" /> <script type="text/javascript"> jQuery(function($) { $("input[name='date1']").datepicker({ "yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"minDate":0 }); }); </script> </td> </tr> <tr> <th>予約希望日 第二希望<span class="required-srt">必須</span></th> <td><input type="text" name="date2" size="30" value="" /> <script type="text/javascript"> jQuery(function($) { $("input[name='date2']").datepicker({ "yearSuffix":"\u5e74","dateFormat":"yy\u5e74mm\u6708dd\u65e5","dayNames":["\u65e5\u66dc\u65e5","\u6708\u66dc\u65e5","\u706b\u66dc\u65e5","\u6c34\u66dc\u65e5","\u6728\u66dc\u65e5","\u91d1\u66dc\u65e5","\u571f\u66dc\u65e5"],"dayNamesMin":["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"],"dayNamesShort":["\u65e5\u66dc","\u6708\u66dc","\u706b\u66dc","\u6c34\u66dc","\u6728\u66dc","\u91d1\u66dc","\u571f\u66dc"],"monthNames":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"monthNamesShort":["1\u6708","2\u6708","3\u6708","4\u6708","5\u6708","6\u6708","7\u6708","8\u6708","9\u6708","10\u6708","11\u6708","12\u6708"],"minDate":0 }); }); </script> </td> </tr>

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

WordPressのバージョンは 5.1.1 です。

Answer 1

普通は問題ないと思うのですが...

こちらのテスト環境では、4つ入れてみても問題なく個々のデートピッカーが動作しています。

お使いのテーマが不明ですが、WordPress 標準の TwentyNineteen やTwentySeventeen 等でも発生するでしょうか？

質問に記載された URL の HTML を拝見した感じでは、 jQuery v1.12.4 と jQuery v2.2.4 の2つを読み込んでいるようですので、コンフリクトしている部分があったりしないでしょうか？

Comments

[no23h]

ご回答ありがとうございます。
ご指摘の通り、jQueryが２つ読みこまれていまして、
プラグインが自動で読み込むjQuery UIのバージョンと相性も影響があったようです。
jQuery v1.12.4のみに設定すると正常に動作しました。

まずはテーマを戻してみるなど、大変勉強になりました。
ありがとうございました。