Así que tengo un componente de acordeón reutilizado del componente deacordeón de arranque que necesitaba para agregarlos dinámicamente con la respuesta del servidor. Ahora, si uso el html estático del enlace anterior, funciona y cambia correctamente. Sin embargo, cuando hago el siguiente código, no funciona:

Sección de envoltorio

 <div class="accordion" id="accordionExample"></div>

Parte JS:

Aquí el elemento proviene de la respuesta realizada a partir de una solicitud de ajax.

 $(".accordion").append( `<div class="accordion-item"> <h2 class="accordion-header" id=${item._id}> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target=#collapse${item._id} aria-controls=collapse${item._id} aria-expanded="false" > ${item.productName} </button> </h2> <div id=collapse${item._id} class="accordion-collapse collapse ${ index == 0 ? "show" : "" }" aria-labelledby=${item._id} data-bs-parent="#accordionExample" > <div class="accordion-body"> ${item.description} </div> </div> </div>` );

Cuando hago clic en un acordeón no expandido, uno se expande y los otros se cierran. Sin embargo, cuando trato de cerrar un elemento de acordeón ya expandido, parpadea (en el dom puedo ver que la clase cambia de colapsada a colapsada y regresa nuevamente). El aria-expandido también sigue siendo verdadero, por lo que supongo que sí. no colapsar.

¿Qué debo editar para que funcione?