Bootstrap collapse and id - php

Question

Using php and mysql and bootstrap.
The php and mysql works fine but for the bootstrap, if i am actually calling values from
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
im getting all rows in a given div but if i want to use bootstrap collapse
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
Since the id of the div will be the same, only 1 will collapse if theres more than 1 row. Even if i used modal, when clicking on the button to display to modal, only for the first value will display
<?php
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){?>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">`
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<?php }?>
The problem is for the button thanks

Answer 1

If you need unique ids for each row you can do this, for example:
<?php
$i = 0;
while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
$current_id = 'id-' . $i;
$i++;?>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff
<button data-toggle="collapse" data-target="#<?=$current_id?>">More info</button>
<div id="<?=$current_id?>" class="collapse">
<div id="chart_div" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<?php }?>
In this case you will have unique ids - id-0, id-1, id-2, etc. assigned to each item of your output.

Answer 2

Add data to data-target button attribute and id collapse div attribute to distinct each one.
JSFidlle based on your div
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo">More info</button>
<div id="demo" class="collapse">`
<div id="chart_div" style="">0</div>
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo1">More info</button>
<div id="demo1" class="collapse">`
<div id="chart_div" style="">1</div>
</div>
</div>
</div>
<div class="w3-container w3-card-2 w3-white w3-margin-bottom">
<div class="w3-container">
some stuff`
<button data-toggle="collapse" data-target="#demo2">More info</button>
<div id="demo2" class="collapse">`
<div id="chart_div" style="">2</div>
</div>
</div>
</div>