Flatpickr not reloading in blade component after view is rerendered | Laravel | Page 1

I have a blade component which is a form to fill in holidays. In this form I load my datepicker component like this:

<x-datepicker wire:model.live="start" label="{{__('forms.labels.start')}}" placeholder="{{__('forms.labels.start')}}" :enable-time="false" />

In the vacation-item component I dispatch an event that opens the vacation-form with the selected vacation. When I do this, the ID of the wire:id of the form tag, which is the starting tag of the vacation-form, changes and the flatpickr no longer works. How can I fix this that my flatpickr field keeps working (opening the flatpickr calendar) ?

My datepicker component:

<div wire:ignore>
    <x-input id="date-picker-{{$id}}" {{$attributes}} right-icon="{{$timeOnly ? 'clock' : 'calendar'}}" readonly />
</div>

<script>
    document.addEventListener('livewire:init', function () {
        let options = @js($options);
        let disabledWeekends = @js($disableWeekends);
        let id = @js($id);

        initFlatPickr(id, options, disabledWeekends);
    });

    document.addEventListener('livewire:navigated', function () {
        let options = @js($options);
        let disabledWeekends = @js($disableWeekends);
        let id = @js($id);

        initFlatPickr(id, options, disabledWeekends);
    });

    function initFlatPickr(id, options, disabledWeekends) {
        if (disabledWeekends) {
            options.disable = [function (date) {
                return (date.getDay() === 0 || date.getDay() === 6);
            }]
        }
        
        if (typeof pickers != 'undefined' && typeof pickers[id] == 'undefined') {
            pickers[id] = jQuery("#date-picker-" + id).flatpickr(options);
        }
    }
</script>

#Flatpickr not reloading in blade component after view is rerendered