I would like to share a problem I am facing with buttons in 'li' tag loop. When the info button is clicked, a particular modal should open. However, after clicking the button, the modal does not pop up on screen even though the EJS loop is functioning properly. I have inspected the generated modal code in the inspect element but it is not displaying on the screen.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<% item.jobApplications.forEach((applicant)=>{ %>
<li class="border border-dark">
<button class="infobtn badge rounded-pill bg-info text-dark" data-bs-toggle="modal" data-bs-target="#infoModal<%= applicant._id %>">info</button>
<span class="small-bold">Name:</span>
<span class="small"><%=applicant.candidateName %></span>
<span class="small-bold">Percentage:</span></td>
<span class="small"><%=applicant.candidateDegreePercent %> %</span>
</li>
<div class="modal fade" role="dialog" id="infoModal<%= applicant._id%>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Candidate Info</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
[...]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<% }) %>
</ul>Here is an image showcasing the li tag loop with an info button that should trigger the modal upon click:
Your assistance is greatly appreciated