カスタムフィールドテンプレートのfieldsetで増やした要素にもdatepickerを適用する

カスタムフィールドテンプレートに標準でセットされているdatapickerとは別のDatepicker | jQuery UIを利用しています。

要素を自由に増やせるカスタムフィールドテンプレートのフィールドセットでdatepickerを利用する要素を増やすと、２つ目以降の増やした要素でdatepickerが出ないという状況になりました。

いろいろな内容を試したのですが、なかなか順調に動くようにならず、以下のコードで一応ちゃんと動くようになりましたのでメモしておきます。

カスタムフィールドテンプレートのテンプレートオプション

[userBlock]
type = break
class = userBlock

[user_fieldset]
type = fieldset_open
legend = ユーザー
multiple = true
multipleButton = true

[user_name]
label = 名前
type = textfield
blank = true

[user_birthdate]
label = 生年月日
type = textfield
class = date-input
readOnly = true
blank = true

[user_fieldset]
type = fieldset_close

WordPressの管理画面に追加したJavaScript

type = breakで追加したuserBlockブロックの中の「追加」がクリックされたときに地道に要素を追って動くようにしています。

<script type="text/javascript">
    jQuery(document).ready(function ($) {
$(".date-input").datepicker();
$('body').on('click','.userBlock a',function(){
        $(this).parent().parent().parent().next().children("dl:last").children("dd").children("input").removeClass("hasDatepicker").datepicker();
        $(this).removeClass("hasDatepicker").datepicker("show");
      });
});
  </script>