passing id to a modal in laravel

So in a list of users, there’s a suspend button, if the suspend button is click, a modal pops up for the admin to type in the reason for suspend. and when send button is pressed that specific user should get a mail with the reason the admin typed.

Now my problem is that no matter the user’s suspend button i click, its only the first user in the database the email is sent to.(even if i click on the 7th, or 12th or any other user in my table, the email is sent to the 1st user in the database)

below is my code, please help

<tbody>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->name }}</a></td>
            <td class="text-right">
                <div class="actions">
                    <a href="{{ route('update_status', $user->user_id) }}" id="suspendd" data-toggle="modal"
                        data-target="#demoModal"
                        class="btn btn-sm bg-danger-light">Suspend</a>
                </div>
            </td>
             <!-- Modal Example Start-->
             <div class="modal fade" id="demoModal" value="{{$user->user_id}}" tabindex="-1" role="dialog" aria- labelledby="demoModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="demoModalLabel">
                                Reason to Suspend This User</h5>
                            <button type="button" class="close"
                                data-dismiss="modal" aria- label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <div class="col-md-10">
                            <textarea rows="5" cols="15" class="form-control summernote" placeholder="Compose mail here" name="details"
                                value="details" id="details" required></textarea>
                        </div>
                    </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">Close</button>
                            <a href="{{ route('update_status', $user->user_id) }}"
                                class="btn btn-primary"><i
                                    class="fa fa-send m-r-5"></i><span>Send</span></a>
                        </div>
                    </div>
                </div>
            </div>
        <!-- Modal Example End-->
        </tr>
    @endforeach
</tbody>

>Solution :

This is because you referenced to only one modal which is the first. From your code, every single modal will have the same id value.
So instead what you should do is attach a number or something unique to each of the modals. You could go like this:

<tbody>
    @foreach ($users as $user)
        <tr>
            <td>{{ $user->name }}</a></td>
            <td class="text-right">
                <div class="actions">
                    <a href="{{ route('update_status', $user->user_id) }}" id="suspendd" data-toggle="modal"
                        data-target="#demoModal{{ $user->user_id }}"
                        class="btn btn-sm bg-danger-light">Suspend</a>
                </div>
            </td>
             <!-- Modal Example Start-->
             <div class="modal fade" id="demoModal{{ $user->user_id }}" value="{{$user->user_id}}" tabindex="-1" role="dialog" aria- labelledby="demoModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="demoModalLabel{{ $user->user_id }}">
                                Reason to Suspend This User</h5>
                            <button type="button" class="close"
                                data-dismiss="modal" aria- label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <div class="col-md-10">
                            <textarea rows="5" cols="15" class="form-control summernote" placeholder="Compose mail here" name="details"
                                value="details" id="details" required></textarea>
                        </div>
                    </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary"
                                data-dismiss="modal">Close</button>
                            <a href="{{ route('update_status', $user->user_id) }}"
                                class="btn btn-primary"><i
                                    class="fa fa-send m-r-5"></i><span>Send</span></a>
                        </div>
                    </div>
                </div>
            </div>
        <!-- Modal Example End-->
        </tr>
    @endforeach
</tbody>

So now each modal would have a unique id rather than what you did before where all button clicks led to the same first modal being popped up.