Accordion items in jinja2 flaks for loop collapse and show together and not independently

my accordion items do not expand separately when one is clicked on. They either both show their content or both remain close. I tried interactive IDs but this did not work.

 {% for study in studies %}
  <div class="accordion" id="accordionExample">
  <div class="accordion-item">
 <h2 class="accordion-header" id="heading{{ study.uid }}">
  <button class="accordion-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 }}" class="accordion-collapse collapse" aria-
  labelledby="heading{{ study.uid }}" data-bs-parent="#accordionExample">
  <div class="accordion-body">
 text
  </div>
</div>
    </div>
   {% endfor %}

is it maybe something to do with jquery and bootstrap not being the same version?

Inspecting the code shows that each accordion item in the loop has a different ID...enter image description here

Back to Top