Accordéon bootstrap avec un foreach

Bonjour tous le monde,

J'essaie de faire fonctionner un accordéon avec une boucle foreach a l'intérieur pour afficher mes données, cependant tous mes accordéons s'ouvraient en meme temps, mais j'ai appris que cela été du a fait que la l'id de ma div était toujours la meme, j'ai donc essayé une méthode pour avoir un id dynamique mais cela n'a pas résolu mon probleme, voir pire mes accordéons ne s'ouvrent pas.

Auriez vous une solution pour mon probleme s'il vous plait ? merci et bonne journée
voici mon code :

            <div class="accordion mb-5" id="accordion-infos">

                <f:for each="{field.container}" as="container"> <!-- foreach bouton contenu -->

                    <div class="card">

                        <div class="card-header" id="heading1-{container.buttoncontent}">
                            <h2>
                                <button class="accordion-button btn btn-link btn-block text-left" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne-{container.buttoncontent}" aria-expanded="true" aria-controls="collapseOne-{container.buttoncontent}">
                                    {container.buttoncontent}
                                </button>
                            </h2>
                        </div>

                        <div id="collapseOne-{container.buttoncontent}" class="accordion-collapse collapse" aria-labelledby="heading1-{container.buttoncontent}" data-bs-parent="#accordion-infos">

                            <div class="card-body">

                                <div class="section-card">

                                    <div class="row">

                                        <div class="col-lg-6 col-md-6">

                                            <f:format.raw>{container.content}</f:format.raw>

                                        </div><!-- col-lg-6 col-md-6-->

                                    </div><!-- row-->

                                </div><!-- section card -->

                            </div> <!-- card body -->

                        </div> <!-- collapsOne -->

                    </div> <!-- card  -->

                </f:for><!-- endfor bouton contenu-->

            </div><!-- accordion mb-5 -->