Bootstrap modal inside the repeater ASP.Net - asp.net

Question

I am trying to show the information in a modal from a repeater. My sample code is fllowing.
<asp:Repeater ID="rptData" runat="server" OnItemDataBound="rptData_ItemDataBound">
<HeaderTemplate>
<table class="table table-striped">
<thead class="bg-secondary text-info">
<tr>
<th>Name</th>
<th>Type of Membership</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><button type="button" class="btn btn-link" id="memberNameList"
data-toggle="modal" data-target="#memberDetailsModal" runat="server"></button></td>
<td><asp:Literal id="typeOfMembershipList" runat="server"></asp:Literal></td>
</tr>
<div class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-bottom-0">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-title text-center">
<h3 class="font-weight-bold" id="memberName" runat="server">Member Name</h3>
<p class="font-weight-bold mb-0" id="typeOfMembership" runat="server">General Member</p>
</div>
</div>
</div>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
I can get all the data from the database in the table in multiple rows. But when I click the button from any row to pop up the modal, it's showing the information from the first row only in the modal. I am getting that, the modal is binding only the information from the first row. I am not sure why.

Answer 1

You can use the same modal for every row. Pass the values using HTML data-* attributes to the modal and then, you can use jQuery to get the data and modify the modal dynamically.
Bootstrap Docs: Varying modal content