Get the value of table data from the same row - php

Question

I'm trying to explain my question the best I can, so sorry if it's a bit confusing.
I have in my HTML Table, with table row, and table data, each row is filled with data from data base, and the table is automatically generated.
Example is below.
<thead>
<tr>
<th>Place ID</th>
<th>Map Name</th>
<th>Place Name</th>
<th>Price 1</th>
<th>Price 2</th>
<th>Price 3</th>
<th>Price 4</th>
#if (Auth::user()->role == "admin")
<th>Action</th>
<th>Booking</th>
#endif
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
#foreach ($places as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->map_name }}</td>
<td>{{ $place->place_name }}</td>
<td>{{ $place->price1 }} €</td>
<td>{{ $place->price2 }} €</td>
<td>{{ $place->price3 }} €</td>
<td>{{ $place->price4 }} €</td>
For booking table head, its filled with a quick booking button, that is supposed to get the Place ID of the data from the same raw, and shows it inside a popup, bellow is the code that creates the popup and fills the data.
<td>{{-- status print --}}
#if ($place->status==0)
<!-- Trigger the modal with a button -->
Quick Book
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form method=POST action="{{ route('admin.place.quickbooking') }}">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Quick Book</h4>
</div>
<div class="modal-body">
#csrf
<div class="form-group">
<label for="usr">ID:</label>
<input type="text" class="form-control" value="{{ $place->place_id }}" id="qBookingID" name="qID" readonly>
<label for="usr">Full Name:</label>
<input type="text" class="form-control" value="{{ Auth::user()->name }}" id="qBookingFullName" name="qFullName">
<label for="usr">Number of Guests:</label>
<input type="number" class="form-control" id="qBookingNumberOfGuests" name="qNumberOfGuests">
<label for="usr">Number of Babies:</label>
<input type="number" class="form-control" id="qBookingNumberOfBabies" name="qNumberOfBabies">
<label for="usr">Check In:</label>
<input type="text" class="form-control" value="{{ session()->get('startingRange') }}" id="qBookingStartDate" name="qStartDate" readonly>
<label for="usr">Check Out:</label>
<input type="text" class="form-control" value="{{ session()->get('endingRange') }}" id="qBookingEndDate" name="qEndDate" readonly><br>
<label for="usr">Map Name: {{ $place->map_name }}</label><br>
<label for="usr" id="qBookingCreatorName" name="qCreatorName">Booked By: {{ Auth::user()->name }}</label>
</div>
{{-- Book --}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" style="color: red; border: 1px solid red;" >Close</button>
<button type="submit" class="btn btn-default" style="color: green; border: 1px solid green;" type="submit">Book</button>
</div>
</div>
</form>
</div>
</div>
#endif
#if ($place->status==-1)
<p>Disabled</p>
#endif
#if ($place->status==2)
<p style="color:red;">Busy</p>
#endif
</td>
My problem is that the auto filled ID is only being filled by the First Data, as no matter which row I click on, the ID stays the same "the first ID from the table"
Any idea what might be causing this, or am I missing something very obvious?
THank you for your help.

Answer 1

For your case the better choice is pass the object place to a function using javascript, every time that you give click the modal appears with the data
that you want to edit or show.
Edit
#push('script')
<script>
$(document).ready(function () {
$('body').on('click', '#editModal', function (event) {
event.preventDefault();
let id = $(this).data('id');
console.log(id)
let name = {{ Auth::user()->name }}
let startdate = {{ session()->get('startingRange') }}
let enddate = {{ session()->get('endingRange') }}
let bookname = 'Booked By:' + name
$.get('place/' + id + '/edit', function (data) {
$("#qBookingID").val(data.data.place_id);
$(#qBookingFullName").val(name);
$("#qBookingStartDate").val(startdate);
$("#qBookingEndDate").val(enddate);
$("#qBookingCreatorName").val(bookname);
$('#Mymodal').modal('show');
})
});
});
</script>
#endpush