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

Question

I am trying to add arrows to my accordion menu to indicate if an element is opened or closed, when the first menu element is clicked all works fine and the arrow points to the hidden element (an aside element)

but when the second menu element is clicked it affects the first accordion element instead of affecting the second element.

i think it's because The nextElementSibling property only returns the element immediately following the specified element, in the same tree level.

this is the example online

Below is my codes

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');