Laravel 5 Fetch the right id from table - php

Question

I have a html table with a list of cars from my database, I wish to select a row in the table to open a bootstrap modal with the right id from the db table. The button "Change Status" opens the modal showing the car, numberplate and status. But it only fetches the latest id. When I move the modal to the top, It fetches the first id on the table. I'm baffled on what I can do to fix this.
Here's my html code:
#if (isset($results))
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="15%"></th>
<th>#</th>
<th>Numberplate</th>
<th>Status</th>
<th>Added</th>
<th>Changed</th>
<th>Change</th>
</tr>
</thead>
#foreach ($results as $result)
<tbody>
<tr>
<td></td>
<td>{{ $result->id }}</td>
<td>{{ $result->LicencePlate }}</td>
<td>{{ $result->Status }}</td>
<td>{{ $result->created_at }}</td>
<td>{{ $result->updated_at }}</td>
<td>
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal">Change Status</button>
</td>
</tr>
</tbody>
#endforeach
#endif
</table>
</div>
#if (isset($cars))
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th width="15%"></th>
<th>#</th>
<th>Numberplate</th>
<th>Status</th>
<th>Added</th>
<th>Changed</th>
<th>Change</th>
</tr>
</thead>
#foreach ($cars as $car)
<tbody>
<tr>
<td></td>
<td>{{ $car->id }}</td>
<td>{{ $car->LicencePlate }}</td>
<td>{{ $car->Status }}</td>
<td>{{ $car->created_at }}</td>
<td>{{ $car->updated_at }}</td>
<td>
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal">Change Status</button>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
#endif
</div>
</div>
</div>
#if (isset($cars))
#foreach ($cars as $car)
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>ID: {{ $car->id }}</p>
<p>Numberplate: {{ $car->LicencePlate }}</p>
<p>Status: {{ $car->Status }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#endforeach
#endif
Not completely sure if a special method in my controller or you need to see my model. If so I can edit this question.

Answer 1

Now in your case the modal id #myModal is repeated inside the loop. Change the modal id and button id like,
<button type="button" class="btn btn-secondary btn-sm" style="background-color: #000; color: #FFF;" data-toggle="modal" data-target="#myModal_{{ $car->id }}">Change Status</button>
And modal
<div class="modal fade" id="myModal_{{ $car->id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<!--Modal content here -->
<div>
FYI: Use the single loop for both button and modal.