Fetch data into modal popup using ajax in laravel - php

Question

I am trying to fetch data from my database into a modal popup and make it dynamic... I'm also a bit confused on how to make the modal id unique for each data on the table... the "button" details pops up the modal.
This is my Table the buttons pops up a modal
This is my controller
public function show($upi)
{
$Patient = Patients::where('upi', '=', $upi)->first();
return Response::json($Patient);
}
This is my Route
Route::get('show-details/{upi}', [BssDashboardController::class, 'show'])->name('details.show');
This is my Ajax script
<script>
$(document).ready(function () {
$('body').on('click', '#show-details', function (){
var patientURL = $(this).data('url');
$.get('show-details/' + patientURL', function (d) {
$('#diagnosisModal').modal('show');
$('#date').text(data.date);
$('#age').text(data.age);
$('#gender').text(data.gender);
$('#plan').text(data.plan);
$('#authcode').text(data.authcode);
$('#findings').text(data.findings);
$('#compliants').text(data.compliants);
$('#investigation').text(data.investigation);
});
})
});
</script>
This is my Button
<a href="javascript:void(0)" id="show-details" data-url="{{ $item->upi }}">
<button class="btn-primary px-3 py-1">Details</button>
</a>
This is my modal
<div class="modal fade" id="diagnosisModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-8 pt-3">
<div class="d-flex flex-row"><label><b>Name:</b></label><div class="fw-600" id="name"></div></div>
<div class="d-flex flex-row"><label><b>DOB:</b></label><div class="fw-600" id="date">16-03-1990</div></div>
<div class="d-flex flex-row"><label><b>Age:</b></label><div class="fw-600" id="age">31 Years</div></div>
<div class="d-flex flex-row"><label><b>Sex:</b></label><div class="fw-600" id="gender">Female</div></div>
<div class="d-flex flex-row"><label><b>Plan:</b></label><div class="fw-600" id="plan">Equity</div></div>
<div class="d-flex flex-row"><label><b>Authcode:</b></label><div class="fw-600" id="authcode">-</div></div>
<div class="d-flex flex-row"><label><b>Findings:</b></label><div class="fw-600" id="findings">Pregnant</div></div>
<div class="d-flex flex-row"><label><b>Complaints:</b></label><div class="fw-600" id="compliants">ANC</div></div>
<div class="d-flex flex-row"><label><b>Investigations:</b></label><div class="fw-600" id="investigation">ANC</div></div>
</div>
<div class="col-4">
<div class="pt-4" style="width: 5rem;height: 4rem;"><img class="w-100" src="{{ asset('img/drake.jpg') }}" id="image" alt=""></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" style="background-color:#ff3030;border-radius:.7rem">Close</button>
</div>
</div>
</div>
</div>