在手風琴菜單中，向下和向上箭頭僅適用於第一個元素

Question

我正在嘗試向我的手風琴菜單添加箭頭以指示元素是打開還是關閉，當單擊第一個菜單元素時一切正常並且箭頭指向隱藏元素（旁邊元素）

但是當單擊第二個菜單元素時，它會影響第一個手風琴元素而不是影響第二個元素。

我認為這是因為 nextElementSibling 屬性只返回緊跟在同一樹級別的指定元素之后的元素。

這是網上的例子

以下是我的代碼

const clcs = document.querySelectorAll('.calcs section header');
let i;
for(i=0; i<clcs.length; i++){
    clcs[i].addEventListener('click', function(){
    
        const aside = this.nextElementSibling;
        const bar1 = document.querySelector('.arr-bar1');
        const bar2 = document.querySelector('.arr-bar2');
        if(aside.style.display === 'block'){
            aside.classList.toggle('show-aside');
            bar1.classList.toggle('rot-bar1'); // here where i am stuck
            bar2.classList.toggle('rot-bar2'); // here where i am stuck
        }else{
            aside.classList.toggle('show-aside');
            bar1.classList.toggle('rot-bar1');
            bar2.classList.toggle('rot-bar2');
        }
        
    });
}

<main class="calcs">
    <section class="acc-item">
        <header class="btn" id="h1">
            <div class="arrow-icon">
                <span class="arr-bar1"></span>
                <span class="arr-bar2"></span>
            </div>
            <span>Question 1</span>
        </header>
        <aside class="sub-btn">
            <h1>This is the first Answer</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </aside>
    </section>
    <section class="acc-item">
        <header class="btn" id="h2">
            <div class="arrow-icon">
                <span class="arr-bar1"></span>
                <span class="arr-bar2"></span>
            </div>
            <span>Question 2</span>
        </header>
        <aside class="sub-btn">
            <h1>This is the first Answer</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
        </aside>
    </section>
</main>

section{
    display: grid;
    grid-template-rows: repeat(2, auto);
    border-top: 1px solid #2a2c2d;
}
section header{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #fec23d;
    text-align: center;
    color: #141e2f;
    padding: 1rem 1.2rem;
    cursor: pointer
}
.arrow-icon{
    display: flex;
    justify-content: center
}
.arr-bar1{
    grid-column: 1/2;
    transform: rotate(-35deg) translate(1.5px, 1px);
    transition: 0.1s;
    width: 13px;
    height: 3px;
    margin: 8px 0;
    background-color: #141e2f;
    border-radius: 2px;
}
.arr-bar2{
    grid-column: 2/3;
    transform: rotate(35deg) translate(-1.5px, 1px);
    transition: 0.1s;
    width: 13px;
    height: 3px;
    margin: 8px 0;
    background-color: #141e2f;
    border-radius: 2px;
}
.rot-bar1{
    transform: rotate(35deg) translate(1.5px, -1px);
    transition: 0.1s;
}
.rot-bar2{
    transform: rotate(-35deg) translate(-1.5px, -1px);
    transition: 0.1s;
}
section header span{
    grid-column: 2/4;
    grid-row: 1/2;
}
.show-aside{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    background: #141e2f;
    padding: 1rem 1.5rem;
    color: #fff;
}
section aside{
    display: none;
    overflow: hidden
}

Answer 1

const bar1 = this.querySelector('.arr-bar1');
const bar2 = this.querySelector('.arr-bar2');