Delete data with confirmation modal

Question

I want to delete selected data with confirmation modal but somehow it only deletes the latest data not the selected data. Maybe there's something with the JavaScript logic but I can't seem to find anything wrong. Here's my full code:

Controller:

public function destroy($id) {
    User::find($id)->delete();

    return redirect('usercontrol')->with('status', 'User successfully deleted!');
}

View:

<tbody>
    @foreach ($users as $user)
        <tr>
            <th scope="row">
                {{ $user->id }}
            </th>
            <td>
                {{ $user->first_name }} {{ $user->last_name }}
            </td>
            <td>
                {{ $user->email }}
            </td>
            <td>
                {{ $user->role }}
            </td>
            <td>
                {{ $user->created_at }}
            </td>
            <td>
                <a href="users/{{ $user->id }}/edit" class="badge btn-success">
                    <i class="fas fa-edit" style="color:white"></i>
                </a>
                <a href="{{ '#' }}" class="delete-modal badge btn-danger" data-value="{{ $user->id }}" data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-trash-alt" style="color:white"></i>
                </a>
            </td>
        </tr>
    @endforeach
</tbody>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content shadow-sm">
            <form action="/users/{{ $user->id }}" method="POST" class="d-inline">
                @method('delete')
                @csrf
                <div class="modal-body">
                    <h3 class="text-center">Are you sure?</h3>
                </div>
                <div class="modal-footer justify-content-around pt-0 border-top-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger" name="delete_user">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function (e) {
    $(document).on("click", ".delete-modal", function (e) {
        var delete_id = $(this).attr('data-value');
        $('button[name="delete_user"]').val(delete_id);
    });
});

Answer 1

The problem is that your modal is outside of your for loop and that you are trying to access the $user variable in your modal. At this point in time the $user variable contains the last element of your for loop, because your loop has already iterated. That is the reason why you are always deleting your last user.

There are 2 options:

1. Put your Modal code into your loop (this will create a modal for each entry)
2. It is good practice to only have one modal and change the values dinamically (like you wanted to do). But for that you will have to pass/build the correct delete URL in your on click method

Give your form an id like id="delete-form" afterwards in your onclick method you can set the action dinamically:

$('#delete-form').attr('action', '/users/' + delete_id);