bootstrap 4 collapse (accordion table) in django - django

Question

I've posted the code for a table in django templates that is generated dynamically using an array from views.py. I've added a bootstrap4 collapse, that runs when a chevron button is clicked. However, it shows ALL of the hidden collapses instead of just the collapsible data for that given row (see img below).
I know that I can set ids dynamically, but I haven't had any luck passing functions to the "data-target" attribute.
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<!-- COLLAPSE CONTENT -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>

Answer 1

The "toogle button" have this HTML code:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo">
and the collapsible content is the following:
<td id="demo" class="collapse">[...]</td>
It's normal every toggle button show or hide all collapsible contents in your page, because all these elements are related to the same #demo identifier.
You have to make sure the id of collapsible content is unique accross all the document, and ensure the corresponding button references the same unique id. Maybe use your result id (from context variable) to do something like that:
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo-{{ r.pk }}">
<td id="demo-{{ r.pk }}" class="collapse">[...]</td>
EDIT: Of course, you have to adapt it to YOUR data. In this example, I imagine your list result contain many model instances, so in each result r, the value r.pk is unique.
In your template, if results contain something else, you have to make sure a unique str or int is extracted from each value to uniquify the idyou write into your HTML.
Maybe it will be demo-{{ r.split.6 }} or demo-{{ r.a_unique_attr_in_my_object }} or demo-{{ r.slugify }}.

Answer 2

Try to put the content you want to hide under the " COLLAPSE CONTENT ".
like this:
<table class="table table-hover">
<thead class>
<tr>
<th style="width:5%"></th>
<th>Sample</th>
<th>Reference</th>
<th>Cost</th>
<th>Sum</th>
</tr>
</thead>
<tbody>
<div class="container" id="accordion">
<div class="card">
{% for r in result %}
<tr>
<td>
<button type="button" class="fa fa-chevron-right rotate" data-toggle="collapse"
data-target="#demo" onclick="">
</button>
</td>
</tr>
<tr>
<td id="demo" class="collapse" colspan="5" >
<td> {{ r.split.0 }} </td> <!-- sample word -->
<td> {{ r.split.2 }}</td> <!-- ref word -->
<td> {{ r.split.4 }}</td> <!-- cost -->
<td> {{ r.split.3 }}</td> <!-- sum -->
</td>
</tr>
{% endfor %}
</div>
</div>
</tbody>
</table>
By the way, don't forget the Bootstrap CDN