Scroll to active project panel

Hello all! I am building a website for the first time with kirby and so far so good. I have a list of projects that work as an accordion so when someone clicks on a panel, it expands and shows the project’s content. When the user clicks on a panel, not only the panel should be opened, but it should scroll to the activated panel. I managed to achieve this for the first panel but when I click on any other project the accordion only scrolls to the top of the first panel. Is there something I am missing? appreciate any help!

Here’s my code:

<section class="projects">
    <?php foreach($data->children()->listed() as $project): ?>

<div class="project">
 <figure>
 <?= $project->image() ?>
</figure>
<div class="project-intro">
<p class="title">
<?= $project->title() ?>
</p> 
<p class="description">
<?= $project->description() ?>
</p> 
    </div>
<button type="button" class="accordion__btn">
<p class="show-btn">Show More</p>    
</button>
<div class="accordion__content">
<?= $project->cover() ?>
<?= $project->text() ?>
<?= $project->image() ?>
</div>
</div>
            <?php endforeach ?>


document.querySelectorAll('.accordion__btn').forEach(button=> {

button.addEventListener('click', () => {

const accordionContent = button.nextElementSibling;

button.classList.toggle('accordion__btn--active');

if (button.classList.contains('accordion__btn--active')) {

accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';

button.scrollIntoView({behavior: "smooth"});

} else {

accordionContent.style.maxHeight = 0;

}

})

});