So I have an accordion component reused from bootstrap accordion component I needed to dynamically add them wrt the response from server. Now if I use the static html from the above link it works and toggles properly. However when I do the below code it does not work:

Wrraper section

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

JS part:

Here item is coming from the response made from an ajax request.

$(".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>`
            );

When I click on an unexpanded accordion that one expands and the others close. However when I try to close an already expanded accordion item it blinks(in the dom I can see that the class changes from collapsing to collapsed and return back again.) The aria-expanded also keeps remaining to true which is why I assume it does not collapse.

What should I edit to make it work.