Hello, Im making collapsible elements for each table row inside of a foreach loop. The collapsible element shows an image when clicked.

​

My code snippet for the collapsible element is as follows:

@foreach (var item in Model) { <tr> <td> <nav class="navbar navbar-collapse navbar-dark"> <a data-toggle="collapse" href="#@item.Title"> @Html.DisplayFor(modelItem => item.Title) </a> <div class="collapse navbar-collapse" id="@item.Title"> <img src="@item.FlyerUrl"/> </div> </nav> </td> 

​

This works wonderfully for the first row only. The other rows are not responsive. The HTML is correct for the rest of the rows as well, but they dont collapse like the first one.