I’m building a KYC system that has multiple steps for the customer’s info
I’m using vildanbina/livewire-wizard for the multi step form
it’s working fine
but on the last step I have created a javascript signature pad that allows the user to draw their signature and then stores it as a base64
the problem is that when I move through steps the javascript code of the signature pad doesn’t work ( the user can’t draw )
but when I reach the step of the signature and refresh the page the javascript code works and the user is able to sign

this is the function called on livewire component when I move thro steps

public function setStep($step): void
    {
        $this->callHook('beforeSetStep', $this->activeStep, $step);

        if ($this->hasPrevStep($step)) {
            $this->stepsValidation($this->prevStep($step));
        }

        $this->getCurrentStep()->callHook('onStepOut');

        $this->activeStep = $step;

        $this->getCurrentStep()->callHook('onStepIn');

        $this->callHook('afterSetStep', $this->activeStep, $step);
    }

and this is the button of each step 

 <x-button.circle
                :positive="$stepIsGreaterOrEqualThan && !$isFailedStep"
                :negative="$isFailedStep"
                wire:click="setStep({{ $stepInstance->getOrder() }})"
                icon="{{ $stepInstance->icon() }}"
            />

the is the signaure pad view

<div class="col-sm-6">
                        <h3>Click to sign</h3>
                        <input id="img-data" type="text" wire:model="state.signature" wire:change="updateSignature">
                        {{--                        <input type="hidden" id="txt" style="border-radius: 5px;">--}}
                        {{--                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" id="sign-img" style="cursor: pointer; border: 1px solid rgb(199, 200, 201); height: 150px; width: 300px; border-radius: 5px;">--}}
                        <div id="signature-pad" class="m-signature-pad" >

                            <div class="m-signature-pad--body">
                                <canvas style="border: 2px dashed #ccc"></canvas>
                            </div>

                            <div class="m-signature-pad--footer">
                                <button type="button" data-action="clear" id="clear-btn" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">مسح</button>

                                <button type="button" data-action="save" id="save-btn" class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800">حفظ التوقيع</button>

                            </div>
                        </div>                      

                    </div>

and finnaly this is the signature pad javascript

            // Wrap your JavaScript code inside a function to initialize the signature pad
            var wrapper = document.getElementById("signature-pad"),
                clearBu
tton = wrapper.querySelector("[data-action=clear]"),
                saveButton = wrapper.querySelector("[data-action=save]"),
                canvas = wrapper.querySelector("canvas"),
                signaturePad;

            // Adjust canvas coordinate space taking into account pixel ratio,
            // to make it look crisp on mobile devices.
            // This also causes canvas to be cleared.
            function resizeCanvas() {
                var ratio =  window.devicePixelRatio || 1;
                canvas.width = canvas.offsetWidth * ratio;
                canvas.height = canvas.offsetHeight * ratio;
                canvas.getContext("2d").scale(ratio, ratio);
            }

            resizeCanvas();

            signaturePad = new SignaturePad(canvas);

            clearButton.addEventListener("click", function(event) {
                signaturePad.clear();
                $("#save-btn").prop("disabled", false);
                $("#save-btn").attr("class", "focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800");
                $("#img-data").val('');
            });

            saveButton.addEventListener("click", function(event) {
                event.preventDefault();

                if (signaturePad.isEmpty()) {
                    alert("Please provide a signature first.");
                } else {
                    var dataUrl = signaturePad.toDataURL();
                    var image_data = dataUrl.replace(/^data:image/(png|jpg);base64,/, "");

                    // Set the value of the input field with id 'img-data' to the image_data
                    $("#img-data").val(image_data);

                    // Check if img-data is not null
                    if ($("#img-data").val() != null) {
                        // Disable the button with id save-btn
                        $("#save-btn").prop("disabled", true);
                        $("#save-btn").attr("class", "py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700");

                    } else {
                        // Enable the button with id save-btn
                        $("#save-btn").prop("disabled", false);
                    }

                    $.ajax({
                        url: '/save-signature',
                        type: 'POST',
                        data: {
                            image_data: image_data,
                        },
                    }).done(function() {
                        //
                    });
                }
            })

I’ve tried using livewire:navigated on the javascript but it didn’t work because the livewire-wizard I’m using doesn’t use wire:navigate instead it uses wire:click