Getting the correct ID to delete in site with multiple posts

I just ran into an issue I just can’t get my head around.

I have a site with all the applications a user has made, looking like this:

I have a button to delete/cancel on each post this exact post (Bewerbung zurückziehen).

When pressing that button, a modal opens with some text. When he presses the delete button in the modal the application is canceled if the user is sure to delete it.

However, it is always the first on the page that gets deleted, not the one on which the button was pressed.

I have to somehow get the application’s ID on which the button was pressed, but I have zero clue on how to do it.

Here is the blade code:

<div class="flex-grow">
    @foreach($bewerbungen as $bewerbung)
        @foreach($stellenanzeigen_names as $stellenanzeigen_name)
            @if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
                <div class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 grey_bg border-solid border-2 border-black rounded-lg">
                    <!--Card 1-->
                    <div>
                        {{ $stellenanzeigen_name->Titel }}
                        <hr class="border-black">
                    </div>
                    <div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
                        ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}
                    </div>
                    <div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
                        ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}
                    </div>
                    <div class="flex justify-end">
                        <button type="submit"
                                name="open_btn"
                                class="open-btn mr-8 text-black px-4 py-3 rounded text-base font-medium button_bg float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100"
                        >
                            Bewerbung zurückziehen
                        </button>
                    </div>
                    <div id="cancel_appl_modal"
                         class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md post_bg hidden text-white">
                        <div class="mt-3 text-center text-2xl">
                            Bewerbung zurückziehen
                        </div>

                        <div class="items-center px-4 py-3">
                            <label for="neue_telefonnummer" class="sr-only">Neue Telefonnummer</label>

                            <form method="post"
                                  action="{{ route('delete', $bewerbung->Bewerbung_ID) }}">
                                @csrf
                                <div class="text-lg mb-4">
                                    Wenn Sie die Bewerbung zurückziehen haben Sie keinen Zugriff mehr
                                    auf alle Daten.
                                    Die Daten werden jedoch noch im System archiviert.
                                </div>
                                <button type="submit"
                                        id="ok_btn"
                                        class="mb-4 pb-3 w-full text-black px-4 py-3 rounded text-base font-medium bg-teal float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 shadow-2xl border-2 w-full p-4 rounded-lg"
                                >
                                    Bewerbung zurückziehen
                                </button>
                            </form>
                        </div>

                        <div class="items-center px-4 py-3">
                            <button id="back_btn"
                                    class="mb-4 pb-3 w-full text-black px-4 py-3 rounded text-base font-medium bg-teal float-right shadow transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100 shadow-2xl border-2 w-full p-4 rounded-lg"
                            >
                                zurück
                            </button>
                        </div>
                    </div>
                </div>
            @endif
        @endforeach
    @endforeach
</div>

This is the JS code for the modal:

let buttons = document.querySelectorAll('.open-btn');

var delete_appl_modal = document.getElementById("cancel_appl_modal");

buttons.forEach((button) => {
    button.addEventListener('click', function (event) {
        // this is where you would open the modal
        delete_appl_modal.style.display = 'block';
        console.log(event.target.innerHTML);
    })
});

var submit_btn = document.getElementById("ok_btn");

var back_btn = document.getElementById("back_btn");

open.onclick = function () {
    delete_appl_modal.style.display = "block";
}

back_btn.onclick = function () {
    delete_appl_modal.style.display = "none";
}

window.onclick = function (event) {
    if (event.target == modal) {
        delete_appl_modal.style.display = "none";
    }
}

Answer

This is your form :

<form method="post" action="{{ route('delete', $bewerbung->Bewerbung_ID)}}">

but it’s in a loop, so presumably you are creating lots of them, each with the same button with the same ID :

<button type="submit" id="ok_btn"  ... >

Since ID has to be unique, when your javascript fires, it looks for the element with ID “ok_btn” to submit the relevant form. Since there are lots (again, ID should be unique) then it just submits the first one it comes to. So it will always just delete the first one on the page.

My suggestion would be :

1. Don’t put the form or the modal in the loop.
2. Put the modal at the end, with the form inside it, and within the form have a hidden field (called, say, “delete_id”.
3. Use javascript to populate the “delete_id” with the relevant ID of the thing to be deleted when the user clicks to bring up the modal.
4. Use the confirmation button to submit the form, as you do at the moment.