MVC5 Bootstrap collapsible with dynamic class - asp.net-mvc

Question

I am having my view bound to datatable as follows
#{int i = 1;}
#foreach (var item in Model.Rows)
{
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading bg-info">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse#(i)">
<div class="col-lg-3">
<img style="width:50px" class="float-left p-l-5" src="https://organicthemes.com/demo/profile/files/2012/12/profile_img.png" /> <div class="float-left p-l-10">
<h4 class="m-t-0">#item["First_Name"]</h4>
<p><b>##item["Employee_Code"]</b></p>
</div>
</div>
<div class="col-lg-4">
<h4 class="m-t-0">#item["Leave_Description"]: #item["No_Of_Days"] days - <span class="blue_heading">#item["Start_date"]</span></h4>
<h4 class="m-t-0">#item["Leave_Purpose"]</h4>
</div>
<div class="col-lg-4">
</div>
</a>
</div>
<div id="collapse#(i)" class="panel-collapse collapse">
<div class="panel-body">
<div class="center_table">
<div class="border_table">
<table class="table table-hover table-expandable table-striped">
<tr>
<td>
Leave Type: #item["Leave_Description"]
</td>
<td>
Days : #item["No_Of_Days"]
</td>
</tr>
<tr>
<td>
From : #item["Start_Date"]
</td>
<td>
To : #item["End_Date"]
</td>
</tr>
<tr>
<td colspan="2">Reason : #item["Leave_Purpose"]</td>
</tr>
</table>
</div>
<div class="clearfix"></div>
<div class="well text-center p-10"><button type="button" class="btn btn-default">Accept Grant</button> <button type="button" class="btn btn-default">Reject</button></div>
</div>
</div>
</div>
</div>
</div>
i++;
}
I am getting the required output but when clicking on first row the second row is also showing as collapsed. My scenario is when there are multiple rows on clicking a particular row other rows collapse should be hidden.
Can someone tell what change do I need to achieve the scenario?

Answer 1

Can you try
i=i+1;
Sometime foreach confuses with ++ operator
Also you can try collapse-#i instead of #collapse#(i)