How To Use Multiple Bootstrap Collapse Elements Dynamically In Php

I am using this code which contains html along with php, when there are multiple elements in collapse only the first element is working properly because there is id named collapseO

Solution 1:

Increment an index on each iteration and include it in the markup output

<divclass="accordion"><?php$i=0;
        foreach ($topics_list->result_array() as$row) {
        $i++;
        ?><divclass="accordion-group"><divclass="accordion-heading"><aclass="accordion-toggle"data-toggle="collapse"data-parent="#accordion2"href="#collapse<?=$i?>"><h2><?phpecho$row['name'];
        ?></h2></a></div><divid="collapse<?=$i?>"class="accordion-body collapse "><divclass="accordion-inner"><b><h3> Material Link-:<?phpecho"<a href='" . $row['link'] . "'>Link</a></h3></b>";
                            echo"<br> <b><h3>Hardness-:";
                            echo$row['hardness'] . "</h3></b>";
                            echo"<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
                            ?></div></div></div><?php } ?></div></div><?php } ?></div>

Solution 2:

Try this ...I can use it

<divclass="panel-group"id="accordion"role="tablist"aria-multiselectable="true"><divclass="panel panel-primary"><?PHP$i = 0;
                        while($objResult = mysqli_fetch_array($objQuery)) {     
                        $i++;
                    ?><divclass="panel-heading"role="tab"id="headingOne"><h4class="panel-title"><adata-toggle="collapse"data-parent="#accordion"href="#collapseOne<?=$i?>"aria-expanded="true"aria-controls="collapseOne"><?=$objResult["rela_Name"];?></a></h4></div><divid="collapseOne<?=$i?>"class="panel-collapse collapse in"role="tabpanel"aria-labelledby="headingOne"><divclass="panel-body"><?=$objResult["rela_Detail"];?></div></div><?PHP
                        }
                    ?></div></div>