Accordion in for loop stays always open-CodePudding

I have made an accordion with bootstrap but it is in a for loop, so when I click on one item of the accordion, all other items open at the same time. How can I only click and open one item of the accordion?

{% for study in studies %}
<div  id="accordionExample">
<div >
<h2  id="headingOne">
  <button  type="button" data-bs-toggle="collapse" data-bs- 
target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    {{ study.uid }}
  </button>
</h2>
<div id="collapseOne"  aria- 
labelledby="headingOne" data-bs-parent="#accordionExample">
  <div >
text
  </div>
</div>
 </div>

{% endfor %}

CodePudding user response：

Change the id and allocate some dynamic id's, Id is repeating due to which when you click on one accordion all the other accordions opened also because you allocating the same id to all.

CodePudding user response：

{% for study in studies %}
<div  id="accordionExample">
<div >
<h2  id="heading{{ study.uid }}">
  <button  type="button" data-bs-toggle="collapse" data-bs- 
target="#collapse{{ study.uid }}" aria-expanded="true" aria-controls="collapse{{ study.uid }}">
    {{ study.uid }}
  </button>
</h2>
<div id="collapse{{ study.uid }}"  aria- 
labelledby="heading{{ study.uid }}" data-bs-parent="#accordionExample">
  <div >
text
  </div>
</div>
 </div>
{% endfor %}