Trying to send id through modal form but couldnt get the exact record id

I'm a beginner in Laravel and currently trying to create a simple admin panel that displays a list of branches with edit/delete button. Problem that i'm facing right now is that the data is properly displayed in any of the modal, but when the form is submitted, the id that is sent is different and the inputs are set to null. From what I can see, it sends the id of the first row that is displayed in the table. So when i try to delete a record, the first row will be the one to get deleted instead of the record that i clicked on. To keep this post short, lets ignore update for now.

how my data is displayed in branchlist.blade.php:

<tbody>
    @foreach($query as $data)
    <tr id="record{{$data->id}}">
        <td>{{ $loop->iteration }}</td>
        <td>{{$data->branch}}</td>
        @if($usertype == 1)
        <td>
            @include('EverPeace.updatebranch')  
            <a href="#" data-toggle="modal" data-target="#updatebranchModal{{$data->id}}">
                <i class="material-icons" title="Edit">&#xE254;</i>
            </a>
            @include('EverPeace.deletebranch')                                                     
            <a href="#" data-toggle="modal" data-target="#deletebranchModal{{$data->id}}">
                <i class="material-icons" title="Delete">&#xE872;</i>
            </a>
        </td>
        @endif
    </tr>
    @endforeach
</tbody>

delete modal:

<!-- Delete Modal HTML -->
<div id="deletebranchModal{{$data->id}}" class="modal fade">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Delete Branch</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <form method="POST" id="deletebranchform" action="{{ route('deleteBranch') }}">
                    @csrf
                    
                    <p>Are you sure you want to delete branch <b>{{$data->branch}} {{$data->id}}</b></p>
                    <p class="text-warning">
                        <small>This action cannot be undone.</small>
                    </p>
                    <div class="col-span-6 sm:col-span-4">
                        <x-jet-label value="Type 'Delete' into the input field below to confirm" />
                        <input name="confirmdelete" type="text" class="mt-1 block w-full" />
                    </div>
                    <input name="id" value="{{ $data->id }}" type="hidden">
                    <input name="branch" value="{{ $data->branch }}" type="hidden">
                </form>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
                <input type="submit" form="deletebranchform" class="btn btn-danger" value="Delete">
            </div>
        </div>
    </div>
</div>

Route:

Route::POST('/deleteBranch',[userCtrl::class,'deleteBranch'])->name('deleteBranch');

Controller:

public function deleteBranch(Request $req)
    {
        dd($req->all());
        //dd($req->confirmdelete);
        //dd($id);
        if (strtoupper($req->confirmdelete) == "DELETE") {
            $id->delete();

            return redirect('/branchlist')->with('success', 'Branch Deleted');
        } else {
            return Redirect::back()
                ->withErrors('There may be a typo in the field')
                ->withInput();
        }
    }

result from dd($req->all())

array:4 [▼ // app\Http\Controllers\userCtrl.php:103
  "_token" => "fh79FYQYc4522s8noRqeaUTTAFvd8DgPV67OkgGj"
  "confirmdelete" => null
  "id" => "1"
  "branch" => "EverPeace"
]

I can't figure out what i'm doing wrong. Ive tried using delete method but still the same problem.

Solution

There are many things you can improve on to make this better, look up route modal bindings and pass the id of the branch to the route, and use the delete route method rather than post. You can find these by searching in the Laravel documentation.

As for your issue, it will be because all your forms have the same ID

<form method="POST" id="deletebranchform" action="{{ route('deleteBranch') }}">

It would need to be something like

<form method="POST" id="deletebranchform{{ $data->id }}" action="{{ route('deleteBranch') }}">

And then the button would need to be amended to match

<input type="submit" form="deletebranchform{{ $data->id }}" class="btn btn-danger" value="Delete">

You would need these to be different for each modal otherwise it will just run the first form with this ID on the page, which will be the first record.