javascript - Bootstrap collapse within a foreach loop -

i having trouble getting collapsible panels work within foreach loop. when item clicked, of items expand/retract, isn't want. want each element independent.

i connected database , want display data , able expand see more information.

i've tried lots of different solutions, current method based off https://stackoverflow.com/a/18568997/1366033 should id , href?

any appreciated.

    foreach (var item in groupitem){  <div class="panel-group" id="accordion">                         <div class="panel panel-default" id="panel1">                             <div class="panel-heading">                                 <h4 class="panel-title">                                     <a data-toggle="collapse" data-target="#collapseone"                                        href="#collapseone">                                        @html.displayfor(modelitem => item.name)                                     </a>                                 </h4>                              </div>                             <div id="collapseone" class="panel-collapse collapse in">                                 <div class="panel-body">@html.displayfor(modelitem => item.idnumber)                                 </div>                             </div>                         </div>                      </div> 

basically creating panel loop , assigning same id panel-group , that's causing problem here! can try working below , please note ids should unique in dom

@{int i=0;} foreach (var item in groupitem) {        <div class="panel-group" id="accordion_@i">               <div class="panel panel-default" id="panel_@i">                      <div class="panel-heading">                            <h4 class="panel-title">                                  <a data-toggle="collapse" data-target="#collapseone_@i" href="#collapseone_@i">                                        @html.displayfor(modelitem => item.name)                                   </a>                             </h4>                       </div>                       <div id="collapseone_@i" class="panel-collapse collapse in">                             <div class="panel-body">                                  @html.displayfor(modelitem => item.idnumber)                             </div>                       </div>               </div>         </div>         i++; }