title: Bootstrap collapse within a foreach loop
body: <p>I am having trouble getting the collapsible panels to work within my foreach loop.  When an item is clicked, all of the items expand/retract, which isn't what I want.  I want each element to be independent.  </p>
  
  <p>I am connected to a database and basically want to display the data simply and be able to expand to see more information.</p>
  
  <p>I've tried lots of different solutions, my current method is based off <a href="https://stackoverflow.com/a/18568997/1366033">https://stackoverflow.com/a/18568997/1366033</a>
  What should I do about the id and href?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <pre><code>    foreach (var item in groupItem){
  
  &lt;div class="panel-group" id="accordion"&gt;
                          &lt;div class="panel panel-default" id="panel1"&gt;
                              &lt;div class="panel-heading"&gt;
                                  &lt;h4 class="panel-title"&gt;
                                      &lt;a data-toggle="collapse" data-target="#collapseOne"
                                         href="#collapseOne"&gt;
                                         @Html.DisplayFor(modelItem =&gt; item.Name)
                                      &lt;/a&gt;
                                  &lt;/h4&gt;
  
                              &lt;/div&gt;
                              &lt;div id="collapseOne" class="panel-collapse collapse in"&gt;
                                  &lt;div class="panel-body"&gt;@Html.DisplayFor(modelItem =&gt; item.IdNumber)
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  </code></pre>