express - Issue with accordion in EJS

Question

I'm trying to iterate over my database in EJS, and render them as an Accordion. There are 2 issues here. When I expand an individual accordion, they all expand. To solve this I tried to assign a unique id (by assigning a variable 'i' and then incrementing it at the end of the loop). But this also doesn't seem to work. Not sure what I'm doing wrong here.

Below is my EJS template code.

<% for(let li of list) { %>
            <% let i = 0; %>
                <div class="accordion" id="accordionExample<%=i%>">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne<%=i%>">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne<%=i%>" aria-expanded="true"
                                aria-controls="collapseOne<%=i%>">
                                <%= li.title %> 
                            </button>
                        </h2>
                        <div id="collapseOne<%=i%>" class="accordion-collapse collapse"
                            aria-labelledby="headingOne<%=i%>" data-bs-parent="#accordionExample<%=i%>">
                            <div class="accordion-body">
                                <%= li.body %> 
                            </div>
                        </div>
                    </div>
                </div>
                <% i++;%>
                    <% } %>

Answer 1

Are you using Bootstrap ?

Can you inspect and see what id is being added to accordian content div after render. More info is needed to solve this as I can't figure it out.

The data-target of the button should match with the id of the content div. Please verify this and reach again.