Bind respective record detail to modal in asp.net core

Question

I am working on a project in which there is a partial view. in that i m using razor syntax for displaying div in which records will be displayed using foreach loop. In each div there is a view more link and when clicked it displays description in modal popup. But the problem is that when view more link is clicked of any record the description of only first record is displayed rather than displaying respective records description. Please help me out.

 

Code

 

@using NiyaSpa.Models
@model Tuple<Booking, Customer>
<div class="inner-agile-w3l-part-head">
<h2 class="w3l-inner-h-title">Facials</h2>
</div>
<div>
<p style="text-align:center; font-size:medium;">
We provide skin specific facials as listed below. Each contains 5-8 step treatments including cleansing, chemical or physical exfoliation, gel treatment, steam facial, toning and moisturizing. Our blood circulating facial massage allows products to absorb deep into the skin giving clients long lasting results.
</p>
</div>
<br />
<br />
<div class="row">
<div class="card-deck">
@{
foreach (var facialService in ViewBag.subServices as IEnumerable<SubService>)
{
int id = facialService.SubService_ID;
<div class="col-md-4" style="margin-bottom:25px;">
<div class="card border-primary mb-3" style="width: 18rem;">
<img style="width:280px; height:180px; border-radius:10px; border-width:thin;" class="card-img-top" src="~/images/t2.jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title" style="font-weight:600; margin-bottom:10px; margin-top:10px">
@facialService.Sub_ServiceName
</h4>
<p class="card-text" style="margin:0 0 10px; font-size:small;">
@facialService.Description.Substring(0, 100)
<a href="modal" data-toggle="modal" data-target="#ModalDescription">View More...</a>
</p>
<a asp-controller="OurServices" asp-action="BookAppointment" data-toggle="modal" data-target="#ModalBooking" class="btn btn-primary">Book Now</a>
</div>
</div>
</div>
<!-- Modal Description -->
<div class="modal fade" id="ModalDescription" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="font-weight:600; font-size:18px">
@facialService.Sub_ServiceName
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-23px;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" style="font-size:15px; padding:10px 15px; text-align:justify;">
<p> @facialService.Description</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
}
</div>
</div>
<div class="modal fade" id="ModalBooking" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle" style="font-weight:600; color:crimson; font-family:cursive; font-size:28px; text-align:center;">Book an Appointment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:22px; margin-top:-28px;">
<span aria-hidden="true">×</span>
</button>
<div style="margin-top:10px;">
<p>
<label style="color:crimson; font-size:small;"><b>Booking Policies</b></label>
<ul style="font-size:11px; margin-top:2px;">
<li>
Please arrive 15 mins before your appointment.
</li>
<li>
For appointment cancellation, please call 24 hours before.
</li>
<li>
To make your experience more enjoyable please turn off your phone during body massages and facial.
</li>
</ul>
</p>
</div>
</div>
<div class="modal-body" style="font-size:15px; padding:15px 15px; text-align:justify; margin-top:-15px">
<div class="signup-form">
<form asp-controller="OurServices" asp-action="BookAppointment" method="post">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" asp-for="Item2.CustomerName" placeholder="Customer Name" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>
<input type="email" asp-for="Item2.Email_ID" placeholder="Email Address" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-phone"></i></span>
<input type="text" asp-for="Item2.PhoneNumber" placeholder="Contact Number" class="form-control" required="required" />
</div>
</div>
<div class="form-group">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" asp-for="Item1.BookingDate" placeholder="Appointment Date" required="required" id="datepicker">
</div>
<!-- /.input group -->
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-list"></i></span>
<input type="text" asp-for="Item1.SubService.ServiceName" class="form-control" placeholder="Service Name" disabled="disabled" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="text" asp-for="Item1.TotalAmount" class="form-control" placeholder="Total Amount" disabled="disabled" />
</div>
</div>
<br />
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block btn-lg" style="background-color:crimson; border-color:crimson;">Book Appointment</button>
</div>
</form>
</div>
</div>
</div>
@*<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>*@
</div>
</div>