Multiple canvas one page, and make them able to draw

[timotiushadi]

I know its maybe seems bit weird about the question, but I dont know how to tell and express it. Let me code be:

I have this show.blade.php:

<tr class="text-center">
        <td colspan="2" class="">
            {{-- Form with signature field here, unique for first_sign --}}
            @if ($first != null )
                <label for="firstSign">Pengganti Pertama:</label>
                <br>
                <img src="{{ asset('/storage/archive/signature/'.$first) }}" id="firstSign" alt="First Signature"/>
            @else
                <form id="firstSignatureForm" action="{{ route('backsite.paidLeave.sign.first') }}" method="POST">
                    @csrf
                    <div class="col-md-12">
                        <div id="first-signature-pad">
                            <div class="signature-pad-header">
                                <label for="first-sign">Tanda Tangan:</label>
                            </div>
                            <div class="signature-pad-body">
                                <canvas id="first-sign" style="width: 300px; height: 150px;" class="first-sign border border-2 rounded"></canvas>
                            </div>
                            <div class="signature-pad-footer">
                                <button type="button" id="first-clear" class="first-clear btn btn-sm btn-secondary" data-action="clear">Clear</button>
                                <button type="button" id="first-save" class="first-save btn btn-sm btn-primary" data-action="save" data-form="firstSignatureForm">Save</button>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <input type="hidden" name="id" id="id" value="{{ $paid_leave_transaction->id }}">
                    <input type="hidden" name="first_sign" id="first_sign">
                </form>
            @endif
        </td>
        <td colspan="2">
            {{-- Another form with signature field here, unique for second_sign --}}
            @if ($second != null )
                <label for="secondSign">Pengganti Kedua:</label>
                <br>
                <img src="{{ asset('/storage/archive/signature/'.$second) }}" id="secondSign" alt="Second Signature"/>
            @else
                <form id="secondSignatureForm" action="{{ route('backsite.paidLeave.sign.second') }}" method="POST">
                    @csrf
                    <div class="col-md-12">
                        <div id="second-signature-pad">
                            <div class="signature-pad-header">
                                <label for="second-sign">Pengganti Kedua:</label>
                            </div>
                            <div class="signature-pad-body">
                                <canvas id="second-sign" style="width: 300px; height: 150px;" class="second-sign border border-2 rounded"></canvas>
                            </div>
                            <div class="signature-pad-footer">
                                <button type="button" id="second-clear" class="second-clear btn btn-sm btn-secondary" data-action="clear">Clear</button>
                                <button type="button" id="second-save" class="second-save btn btn-sm btn-primary" data-action="save" data-form="secondSignatureForm">Save</button>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <input type="hidden" name="id" id="id" value="{{ $paid_leave_transaction->id }}">
                    <input type="hidden" name="second_sign" id="second_sign">
                </form>
            @endif
        </td>
        <td colspan="2">
            {{-- Another form with signature field here, unique for spv_sign --}}
            @if ($spv != null )
                <label for="spvSign">SPV:</label>
                <br>
                <img src="{{ asset('/storage/archive/signature/'.$spv) }}" id="spvSign" alt="SPV Signature"/>
            @else
                <form id="spvSignatureForm" action="{{ route('backsite.paidLeave.sign.spv') }}" method="POST">
                    @csrf
                    <div class="col-md-12">
                        <div id="spv-signature-pad">
                            <div class="signature-pad-header">
                                <label for="spv-sign">SPV:</label>
                            </div>
                            <div class="signature-pad-body">
                                <canvas id="spv-sign" style="width: 300px; height: 150px;" class="border border-2 rounded"></canvas>
                            </div>
                            <div class="signature-pad-footer">
                                <button type="button" id="spv-clear" class="btn btn-sm btn-secondary" data-action="clear">Clear</button>
                                <button type="button" id="spv-save" class="btn btn-sm btn-primary" data-action="save" data-form="spvSignatureForm">Save</button>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <input type="hidden" name="id" id="id" value="{{ $paid_leave_transaction->id }}">
                    <input type="hidden" name="spv_sign" id="spv_sign">
                </form>
            @endif
        </td>
    </tr>

Script:

document.addEventListener("DOMContentLoaded", function() {
        // First
        const firstSignaturePad = new SignaturePad(document.querySelector("#first-sign"));
        const firstClearButton = document.querySelector("#first-clear");
        const firstSaveButton = document.querySelector("#first-save");
        // Event listener for the "Clear" button
        firstClearButton.addEventListener("click", function () {
            firstSignaturePad.clear(); // Clears the canvas
        });

        // Event listener for the "Save" button
        firstSaveButton.addEventListener("click", function () {
            // Convert the signature to a data URL
            const signatureDataURL = firstSignaturePad.toDataURL();

            // Set the data URL as the value of a hidden input field
            document.querySelector("#first_sign").value = signatureDataURL;

            // Submit the form
            // Note: Make sure the form has an ID attribute for this to work
            document.getElementById("firstSignatureForm").submit();
        });

        // Second
        const secondSignaturePad = new SignaturePad(document.querySelector("#second-sign"));
        const secondClearButton = document.querySelector("#second-clear");
        const secondSaveButton = document.querySelector("#second-save");
        // Event listener for the "Clear" button
        secondClearButton.addEventListener("click", function () {
            secondSignaturePad.clear(); // Clears the canvas
            console.log('clears clicked');

        });

        // Event listener for the "Save" button
        secondSaveButton.addEventListener("click", function () {
            // Convert the signature to a data URL
            const signatureDataURL = secondSignaturePad.toDataURL();

            // Set the data URL as the value of a hidden input field
            document.querySelector("#second_sign").value = signatureDataURL;

            // Submit the form
            // Note: Make sure the form has an ID attribute for this to work
            document.getElementById("secondSignatureForm").submit();
        });
        
        // SPV
        const spvSignaturePad = new SignaturePad(document.querySelector("#spv-sign"));
        const spvClearButton = document.querySelector("#spv-clear");
        const spvSaveButton = document.querySelector("#spv-save");
        // Event listener for the "Clear" button
        spvClearButton.addEventListener("click", function () {
            spvSignaturePad.clear(); // Clears the canvas
            console.log('clears clicked');

        });

        // Event listener for the "Save" button
        spvSaveButton.addEventListener("click", function () {
            // Convert the signature to a data URL
            const signatureDataURL = spvSignaturePad.toDataURL();

            // Set the data URL as the value of a hidden input field
            document.querySelector("#spv_sign").value = signatureDataURL;

            // Submit the form
            // Note: Make sure the form has an ID attribute for this to work
            document.getElementById("spvSignatureForm").submit();
        });
    });

What am I trying to do is, there are multiple canvas to draw, it should be 5, but I gonna attach 3 at first to simplify. These canvas should be able to draw by separated users. If there is 5, then should be 5 users should be able to draw.

I have tried the first, it works normally. But something weird happen after I submit the first sign, and show it as img. The second and spv canvas cannot be draw anymore. I've tried to do many troubleshoot, yet still not be able to figure out what am I missing.

[UziTech]

can you create a https://jsfiddle.com with a minimal reproduction