How to fix my accordion button using HTML, CSS and Javascript

I am creating a FAQs page, and the accordion button doesn’t seem to be working. In this FAQs page, I have 5 “FAQs” div each containing the accordion button and a “panel” div. Now when i click on the accordion button, the panel div is supposed to be displayed but it is not working

HTML CODE 
<section id="FAQs">
        <div class="FAQs-container">
            <h1>Have any questions?</h1>
            <div class="FAQs">
                <button class="accordion">
                    What is the process of ordering furniture on urban oasis?
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="panel">
                    <p>
                        To order furniture from our ecommerce store, simply browse our product 
                        collection, select the desired items, and add them to your cart. Proceed 
                        to checkout, where you'll enter your shipping and payment information to confirm your order
                    </p>
                </div>
            </div>
            <div class="FAQs">
                <button class="accordion">
                    How do i know a furniture item will fit in my home?
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="panel">
                    <p>
                        To check if a furniture item will fit, measure your space and compare 
                        it with the product's dimensions. Ensure there's enough clearance for 
                        movement, and use room planning tools for a visual fit. Need help? Contact our customer service team!    
                    </p>
                </div>
            </div>
            <div class="FAQs">
                <button class="accordion">
                    Do you offer assembly services for furniture items?
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="panel">
                    <p>
                        Yes, we do offer assembly services for many of our furniture items. You can 
                        select this option during checkout, or contact our customer service team for 
                        more details and availability.    
                    </p>
                </div>
            </div>
            <div class="FAQs">
                <button class="accordion">
                    Can I customise the color or material of a furniture item?
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="panel">
                    <p>
                        Yes, you can customize the color and material of many furniture items! 
                        Simply use the “Customize” option in the navbar and click the “Customize Order” 
                        button  to explore your choices and create a piece that perfectly matches your style.
                    </p>
                </div>
            </div>
            <div class="FAQs">
                <button class="accordion">
                    What if my furniture item arrives damaged or defective?
                    <i class="fa-solid fa-chevron-down"></i>
                </button>
                <div class="panel">
                    <p>
                        If your furniture arrives damaged or defective, please contact our customer service team 
                        immediately. We'll guide you through the return or replacement process and ensure the issue 
                        is resolved quickly.
                    </p>
                </div>
            </div>
        </div>
    </section>

CSS 
#FAQs {
    background: var(--bg);
}

#FAQs .FAQs-container {
    max-width: 75%;
    margin: auto;
}

#FAQs .FAQs-container h1 {
    margin: 1.5rem 0;
    text-align: center;
    letter-spacing: 3px;
}

#FAQs .FAQs-container .FAQs .accordion {
    background-color: var(--white);
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    font-size: 1.2rem;
    width: 100%;
    padding: 2rem 2.5rem;
    outline: none;
    border: none;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

#FAQs .FAQs-container .FAQs .accordion i {
    font-size: 1.6rem;
}

#FAQs .FAQs-container .FAQs .accordion .active,
#FAQs .FAQs-container .FAQs .accordion:hover {
    background-color: #f1f7f5;
}

#FAQs .FAQs-container .FAQs .panel {
    padding: 0 2rem 2.5rem 2rem;
    background-color: var(--white);
    overflow: hidden;
    background-color: #f1f7f5;
    display: none;
}

#FAQs .FAQs-container .FAQs {
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 10px 0px;
}

#FAQs .FAQs-container .FAQs .active {
    border: none;
}

#FAQs .FAQs-container .FAQs .panel p{
    color: rgba(0, 0, 0, 0.7);
    font-size: 1.2rem;
    line-height: 1.4;
}

JAVASCRIPT

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function () {
        this.classList.toggle("active");
        this.parentElement.classList.toggle("active");

        var panel = this.nextElementSibling;

        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    });
}
[FAQs page accordion not working](https://i.sstatic.net/YpCcLXx7.png)

I tried creating an accorion button that displays a paragraph when it is clicked on but it does not work.