Livewire with datepicket dispatch event

Hello,

I have below code for Livewire component view, where i am dispatching event with startDate and endDate,

I can get correct data in my Dashboard, but problem is once re-render happens after disptach, button with id date becomes blank, means one which was created in datepicker with function cb does not work, but when on initial page load, it shows correct 30 days as defined.

How can i re-initalise that function after dispatch?

<div class="d-flex align-items-center px-4">
    <!--begin::Display range-->
    <button type="btn" class="btn btn-sm fw-bold btn-secondary d-flex align-items-center px-4 text-gray-700" id="date" /></button>
    <!--end::Display range-->
    <i class="ki-duotone ki-calendar-8 fs-2 ms-2 me-0"><span class="path1"></span><span class="path2"></span><span
            class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span></i>
</div>

@push('scripts')
    <script>
        document.addEventListener('livewire:navigated', function() {
            
            var start = moment().subtract(29, "days");
            var end = moment();

            function cb(start, end) {
                $("#date").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
            }

            $("#date").daterangepicker({
                startDate: start,
                endDate: end,
                autoApply: true,
                ranges: {
                    "Today": [moment(), moment()],
                    "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
                    "Last 7 Days": [moment().subtract(6, "days"), moment()],
                    "Last 30 Days": [moment().subtract(29, "days"), moment()],
                    "This Month": [moment().startOf("month"), moment().endOf("month")],
                    "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf(
                        "month")]
                },
                locale: {
                    format: 'YYYY-MM-DD' // Set the desired date format here
                }
            }, cb);

            cb(start, end);

            $('#date').on('apply.daterangepicker', function(ev, picker) {

                // Get the selected date
                const startDate = picker.startDate.format('YYYY-MM-DD');
                const endDate = picker.endDate.format('YYYY-MM-DD');

                const startMoment = moment(startDate, 'YYYY-MM-DD');
                const endMoment = moment(endDate, 'YYYY-MM-DD');

                // Trigger Livewire action with the selected date
                Livewire.dispatch('dashboardDateFilterApplied', {
                    startDate: startDate,
                    endDate: endDate
                });
            });

        }, { once: true });
    </script>
@endpush