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 >
                <div >
                    <a href="{{ route('update_status', $user->user_id) }}" id="suspendd" data-toggle="modal"
                        data-target="#demoModal"
                        >Suspend</a>
                </div>
            </td>
             <!-- Modal Example Start-->
             <div  id="demoModal" value="{{$user->user_id}}" tabindex="-1" role="dialog" aria- labelledby="demoModalLabel" aria-hidden="true">
                <div  role="document">
                    <div >
                        <div >
                            <h5  id="demoModalLabel">
                                Reason to Suspend This User</h5>
                            <button type="button" 
                                data-dismiss="modal" aria- label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div >
                        <div >
                            <textarea rows="5" cols="15"  placeholder="Compose mail here" name="details"
                                value="details" id="details" required></textarea>
                        </div>
                    </div>
                        <div >
                            <button type="button" 
                                data-dismiss="modal">Close</button>
                            <a href="{{ route('update_status', $user->user_id) }}"
                                ><i
                                    ></i><span>Send</span></a>
                        </div>
                    </div>
                </div>
            </div>
        <!-- Modal Example End-->
        </tr>
    @endforeach
</tbody>

CodePudding user response：

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 >
                <div >
                    <a href="{{ route('update_status', $user->user_id) }}" id="suspendd" data-toggle="modal"
                        data-target="#demoModal{{ $user->user_id }}"
                        >Suspend</a>
                </div>
            </td>
             <!-- Modal Example Start-->
             <div  id="demoModal{{ $user->user_id }}" value="{{$user->user_id}}" tabindex="-1" role="dialog" aria- labelledby="demoModalLabel" aria-hidden="true">
                <div  role="document">
                    <div >
                        <div >
                            <h5  id="demoModalLabel{{ $user->user_id }}">
                                Reason to Suspend This User</h5>
                            <button type="button" 
                                data-dismiss="modal" aria- label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div >
                        <div >
                            <textarea rows="5" cols="15"  placeholder="Compose mail here" name="details"
                                value="details" id="details" required></textarea>
                        </div>
                    </div>
                        <div >
                            <button type="button" 
                                data-dismiss="modal">Close</button>
                            <a href="{{ route('update_status', $user->user_id) }}"
                                ><i
                                    ></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.