Пользовательский интерфейс jQuery datapicker в динамическом модальном окне

Исходный code jQuery https://code.jquery.com/jquery-3.6.0.min.js

Исходный code jQueryUI https://code.jquery.com/ui/1.12.1/jquery-ui.min.js

Я создаю веб-приложение с тремя модальными окнами, как показано ниже.

Внутри modal-base-layout.html есть <input class="date-input">, для которого я хочу создать jQuery datapickerUI. Мой JS-code для создания родительского класса выглядит следующим образом.

А также создайте дочерний класс для распределения функциональности модальных окон следующим образом.

Однако все функции работают нормально, но не jQuery datepickerUI. Я заметил, что работает только insertDataModal, то есть первый <input>, но не udpateDataModal. Как это исправить?

Я проверил помещение datepicker() на динамически созданные элементы - JQuery/JQueryUI и применил в этой строке initDatePicker() {$(this.modal).on('focus',".date-input", function()...

как это решить?

    <!-- insert data modal -->
    <div class="modal insert-data-modal" id="insertDataModal">
      <div class="modal-header">
        <div class="title">Insert New Data</div>
        <button data-close-button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        <!-- should use if else statement to identify which templates to be used. -->
        {% include "layouts/modals/modal-base-layout.html" %}
      </div>
      <div id="overlay"></div>
    </div>

    <!-- update data modal -->
    <div class="modal update-data-modal" id="updateDataModal">
      <div class="modal-header">
        <div class="title">Update Data</div>
        <button data-close-button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        {% include "layouts/modals/modal-base-layout.html" %}
      </div>
      <div id="overlay"></div>
    </div>

document.addEventListener('DOMContentLoaded', function () {
    class Modal {
      constructor(modalElement, modalSelector, rowId, entireData) {
        this.modal = modalElement;
...
      //initiate date picker
      initDatePicker() {
        $(this.modal).on('focus',".date-input", function(){
          $(this).datepicker({dateFormat: "yy-mm-dd"});
        });

    // updateDataModal example.
    class InsertDataModal extends Modal {
        constructor(modalElement, rowId=null, modalSelector) {
            var dataElements = null;
            var entireData = dataElements;
            super(modalElement, modalSelector, rowId, entireData);
        }
        openModal() {
            super.openModal();
            this.initDatePicker();
        }
    }


    // updateDataModal example.
    class UpdateDataModal extends Modal {
        constructor(modalElement, rowId, modalSelector) {
            var dataElements = $("#entire-data").data();
            var entireData = dataElements.item;
            super(modalElement, modalSelector, rowId, entireData);
        }

        openModal() {
            // shoudl populateData be include in here? or in parentClass?
            super.openModal();
            this.initDatePicker();
            const {updateDropdownElements, updateInputtextElements} = this.populateForm();
            this.populateData(updateDropdownElements, updateInputtextElements);
        }
    }