Expand/Collapse works only for the first item - php

Question

I'm trying to create an accordion/panel with expand/collapse. All the data from model are printed correctly, the only issue I get is that collapse/expand work for the first item. How can I implement it for each item?
my code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
foreach($arr_table_content as $row)
{
echo sprintf($html_ret, $row['TrainingName'],$row['TrType'],$row['Tr_description']);
}
?>
</div>
Thank you for any suggestions

Answer 1

because the rest panel have the same ID as the first panel #collapseOne, try to concatinate an increment number with the id, ex:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne%u" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne%u" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
$counter = 1;
foreach($arr_table_content as $row)
{
echo sprintf($html_ret,$counter,$row['TrainingName'],$row['TrType'],$counter,$row['Tr_description']);
$counter++;
}
?>
</div>

Answer 2

I believe your problem comes from the fact that all your panel-headings have the same id="headingOne". Try setting a dynamic ID in your foreach loop (same thing for your panel-collapse)