Почему складной не работает для динамически создаваемых кнопок

Question

Я получаю данные (вопрос) из базы данных и устанавливаю это значение для кнопки.

Когда я пытался нажать на кнопку, это должно расширить «ответ» на этот вопрос, но это не происходит. Я полностью спроектировал строки в самом скрипте.

Я создал div в HTML и пытаюсь динамически добавить строки в этот div в скрипте.

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


 <script>
   var store;
   var store_count = 0;
   var store_row = document.createElement("div");

    db.collection("FAQs").orderBy("Priority","asc").get().then(function(querySnapshot) {
            querySnapshot.forEach(function(doc) {
                var qid = doc.id;
                var docRef = db.collection("PopopFAQs").doc(qid);
                docRef.get().then(function(doc) {
                    if (doc.exists) {
                        console.log("Document data:", doc.data());
                        store_count++;
                        store = document.createElement("div");
                        store.setAttribute("class", "card");
                        store.setAttribute("id", qid); 
                        if(store_count == 1) {
                            store.innerHTML = `<div class="card-header" id="headingThree">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
                                                        data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
                                                        aria-expanded="false" aria-controls="collapseThree">
                                                        <i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="`+ doc.data().Priority +`" class="collapse show"
                                                aria-labelledby="headingThree" data-parent="#accordionExample">
                                                <div class="card-body">`+ doc.data().Answer +`
                                                </div>
                                            </div>`;
                        }
                        else {
                            store.innerHTML = `<div class="card-header" id="headingThree">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link no-wrap collapsed btn-faqs" type="button"
                                                        data-toggle="collapse" data-target="#`+ doc.data().Priority +`"
                                                        aria-expanded="false" aria-controls="collapseThree">
                                                        <i class="fa fa-arrow-right"></i> `+ doc.data().Question +`
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="`+ doc.data().Priority +`" class="collapse"
                                                aria-labelledby="headingThree" data-parent="#accordionExample">
                                                <div class="card-body">`+ doc.data().Answer +`
                                                </div>
                                            </div>`;
                        }


                        store_row.append(store);
                        document.getElementById("questions").innerHTML = store_row.innerHTML;
                    } else {
                        console.log("No such document!");
                    }
                }).catch(function(error) {
                    console.log("Error getting document:", error);
                });
            });

        });
        var acc = document.getElementsByClassName("accordion");
        var i;
        for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function () {
                this.classList.toggle("active");
                var content = this.parentNode.nextElementSibling;
                if (content.style.maxHeight) {
                  content.style.maxHeight = null;
                } else {
                  content.style.maxHeight = content.scrollHeight + "px";
                }
            });
        }