Using an index in a loop to set unique attributes - html

Question

Im using a loop to render a <div> with tabs in it for each item in a list:
#foreach (var item in Model.things)
{
int counts = 1;
<div class="col-md-12">
<!-- BOX -->
<div class="box border red">
<div class="box-title">
<h4><i class="fa fa-columns"></i><span class="hidden-inline-mobile">#item.Name</span></h4>
</div>
<div class="box-body">
<div class="tabbable header-tabs">
<ul class="nav nav-tabs">
<li class=""><i class="fa fa-circle-o"></i> <span class="hidden-inline-mobile">More</span></li>
<li class=""><i class="fa fa-laptop"></i> <span class="hidden-inline-mobile">Profile</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="box_tab1">
<p>Content #1</p>
<p>...</p>
</div>
<div class="tab-pane fade" id="box_tab2">
<p>Content #2</p>
<p>...</p>
</div>
</div>
</div>
</div>
</div>
<!-- /BOX -->
</div>
}
The problem here is the harcoded values in for example:
<a href="#box_tab2> that "opens" the tab id="box_tab2".
Of course this does not work when there are several tabs with the same ids.
Can I maybe use an index in order to be able to assign unique values where needed?

Answer 1

You're on the right way using a counter/index, you have to use it to build your IDs, in your nav-tabs:
<li><a href='#String.Format("#box_tab1_{0}", count)'>
<li><a href='#String.Format("#box_tab2_{0}", count)'>
and in your tab-content:
<div class="tab-pane fade" id='#String.Format("box_tab1_{0}", count)'>
<div class="tab-pane fade" id='#String.Format("box_tab2_{0}", count++)'>
Note count++ to increment counter after last usage in each loop iteration.