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

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

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

const accordionContent = button.nextElementSibling;


if (button.classList.contains('accordion__btn--active')) { = accordionContent.scrollHeight + 'px';

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

} else { = 0;