WP Tabs FAQ with tabs, expansion and ACF

expansion.js

//Expansion
const expansionTitle = $('.expansion-component .expansion-component__title')
expansionTitle.first().toggleClass('active');
expansionTitle.first().siblings('.expansion-component__panel').toggleClass('active');

faq.php

 <?php
    if (have_rows('faq')) : ?>
    <section class="faq-list">

    <div class="tab">
        <div class="tab-list" role="tablist" aria-label="tabs">
        <!-- /.tab -->
        <?php
        while (have_rows('faq')) : the_row();
            $cat = get_sub_field('category');
            $slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $cat))); //remove characters from sub-field "category"
        ?>

            <button class="tab-link" data-content="<?php echo $slug ?>" role="tab" id="tab-<?php echo get_row_index() ?>">
                <figure class="icon"><img src="<?php echo get_sub_field('icon'); ?>" alt="<?php echo get_sub_field('category'); ?>"></figure>
                <span data-title="<?php echo $slug ?>"><?php echo get_sub_field('category'); ?></span>
            </button>

        <?php endwhile; ?>
        </div>

    <?php while (have_rows('faq')) :
        the_row();
        $cat = get_sub_field('category');
        $slug = strtolower(trim(preg_replace('/[^A-Za-z0-9-]+/', '-', $cat)));
    ?>
        <div class="tab-panel" id="<?php echo $slug ?>" role="tabpanel" aria-labelledby="tab-<?php echo $slug ?>">
            <h3 class="text-h4"><?php echo get_sub_field('category'); ?></h3>
           <!--nested repeater field for questions and answer -->
            <?php if (have_rows('questions')): ?>
                <ul class="expansion-component">
                    <?php while (have_rows('questions')) : the_row(); ?>
                        <li>
                            <h4 class="expansion-component__title"><?php echo get_sub_field('question'); ?></h4>
                            <div class="expansion-component__panel">
                                <p><?php echo get_sub_field('answer'); ?></p>
                            </div>
                        </li>
                    <?php endwhile; ?>
                </ul>
            <?php endif; ?>

        </div>
    <?php endwhile; ?>

    </div>

    </section>
<?php endif; ?>

tab.js

// Tabs Action
const tabLink = document.querySelectorAll(".tab-link");
const tabContent = document.querySelectorAll(".tab-panel");
const faqList = document.querySelector('.faq-list')

if (document.body.contains(faqList)) {

    tabLink.forEach((el) => {
        el.addEventListener("click", activeTab);
    });

    function activeTab(el) {
        const btnTarget = el.currentTarget;
        const content = btnTarget.dataset.content;

        tabContent.forEach((el) => {
            el.classList.remove("active");
        });

        tabLink.forEach((el) => {
            el.classList.remove("active");
        });

        document.querySelector("#" + content).classList.add("active");
        btnTarget.classList.add("active");
    }

    tabLink[0].classList.add("active");
    tabContent[0].classList.add("active");

}