Javascript 在手风琴菜单中，向下和向上箭头仅适用于第一个元素

我试图在我的手风琴菜单中添加箭头，以指示某个元素是打开还是关闭的， 单击第一个菜单元素时，所有功能正常，箭头指向隐藏元素（一个旁侧元素）

但是，当单击第二个菜单元素时，它会影响第一个手风琴元素，而不会影响第二个元素

我认为这是因为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
}

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