Accordion dropdown selection - bootstrap-5

Question

I am using the accordion class to display some data in tables. My code loops through all the table rows and assigns them to an accordion dropdown. My problem is when I select one accordion header they all expand/collapse instead of just the one I clicked on.
<div class="accordion" id="qc_inspection">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="collapseOne" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>
Code works fine if I create each collapsible row independently and take the for loop out, but the number of rows changes depending on the table selected so that will not work.

Answer 1

assigning a unique value to data-bs-target and the accordion body id worked. it does not like just numeric values so I added "a" in front of the value. See working code below:
<div class="accordion">
<div class="accordion-item">
<h1 class="accordion-header">
<button class="accordion-button d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#a{{table['id']}}" aria-expanded="false" aria-controls="collapseOne">
<h1 class="display-6">{{table['inspection']}}</h1>
</button>
</h1>
<div id="a{{table['id']}}" class="accordion-collapse">
<div class="accordion-body">
<input type="text" placeholder="Weight" class="form-control"
value="{{ request.form['weight'] }}"></input>
{{table['min']}} to {{table['max']}} grams
</div>
</div>
</div>
</div>