Expected behavior When adding a new Date Picker textbox, the Input Mask works correctly.

Actual behavior After adding a new Date Picker textbox dynamically, I attach a new Inputmask to all date-picker textboxes. Newest Dynamically added date picker works as expected, but previously added date picker textboxes now do not allow the addition of any other numbers except for the first 2 in the date.

Resources (screenshots, code snippets etc.) Date Creation code:

        const input = $('<input/>')
        .attr('type', 'text')
        .addClass('form-control date-picker')
        .attr('id', `vendor-file-executed-start-date-0`)
        .attr('name', `vendor-file-executed-start-date-0`)
        .attr('data-property', 'ExecutedStartDate')
        .attr('required', true)
        .attr('data-mdb-input-mask', '99/99/9999')
        .attr('data-mdb-mask-placeholder', 'true');
    const label = $('<label/>').attr('for', `vendor-file-executed-start-date-0`).addClass('form-label').text('Executed Start Date');
    const button = $('<button/>').addClass('datepicker-toggle-button btn btn-link btn-sm').attr('data-mdb-toggle', 'datepicker').append(buildIcon('fas fa-calendar datepicker-toggle-icon'));
    const startDateError = buildDiv('invalid-feedback').html('You must enter an Executed Start Date');
    const outline = buildDiv('form-outline datepicker').attr('data-mdb-inline', 'true').attr('data-mdb-format','mm/dd/yyyy').append(input).append(label).append(button).append(startDateError);

Initialization Code:

    const inputs = document.getElementsByClassName('date-picker');
    inputs.forEach((x) => {
        const cc = new Inputmask(x, dateOptions);
    });

I am at a loss and cannot figure out why the newest one works but the older ones don't.

Thanks for the help Tim