The problem is that you're using the same
id
for each modal dialog. In HTML, the
id
attribute needs to be unique within the document.
When you try to access the modal element with ID
exampleModal
, the browser has no way to know
which element you want to access, so it has to pick one. Which one you get will depend on your browser - it sounds like your browser is always picking the first element with that ID.
You need to assign a unique ID to each modal element.
@for (int i = 0; i < Model.Count; i++)
{
string modalId = "exampleModal" + i;
string headerId = "exampleModalLabel" + i;
...
<div class="modal fade" id="@modalId" tabindex="-1" role="dialog" aria-labelledby="@headerId" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="@headerId">...