I am using tui.Calendar to bind Date Picker in a model. and that model opens from different pages. The id of that textbox is the same because I am opening the same model. This Date picker is opening only on one page, not on another.

Below is the HTML

<div class="eventDate col-12 col-md-6 mt-3">
   <label class="control-label">Date</label><span class="text-danger">*</span>
   <div class="tui-datepicker-input tui-datetime-input tui-has-focus">
   <input type="text" id="txtEventDate" aria-label="Date-Time">
   <span class="tui-ico-date"></span>
   <div class="clean-date" onclick="CleanDateTimeFromField('input#txtEventDate')">
      <i class="fas fa-times"></i></div>
   </div>
 <div id="txtEvent_DateWrapper" style="margin-top: -1px;"></div
</div>

Below one is calling from different page

eventDateCalendar = GenerateDatePicker('txtEventDate', 'txtEvent_DateWrapper', new Date(), false);

JS

function GenerateDatePicker(element, wrapper, value, timePicker) {
    var container = document.getElementById(wrapper);
    var target = document.getElementById(element);
    var d = new tui.DatePicker(container, {
        date: new Date(value),
        input: {
            element: target,
            format: timePicker ? 'MM/dd/yyyy HH:mm A' : 'MM/dd/yyyy'
        },
        timepicker: timePicker ? {
            layoutType: 'tab',
            inputType: 'spinbox'
        } : false
    });
    
    return d;
}

const CleanDateTimeFromField = (inputField) => {

    jQuery(inputField).val('');

};

Please solve this issue. I am using it in .net core application