I want to change button color at the top when particular section is in viewport. I achieved this using Gsap ScrollTrigger. but the issue is the css is getting applied to complete button wrapper instead to a button itself. here is the live link. The website is on wordpress using elementor pagebuilder.

Javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    gsap.registerPlugin(ScrollTrigger);

    // Function to handle button activation
    function activateButton(buttonId) {
        // Remove active class from all buttons
        document.querySelectorAll('.top-button').forEach(button => {
            button.classList.remove('active-button');
        });

        // Add active class to the specified button
        document.getElementById(buttonId).classList.add('active-button');
    }

    // Create ScrollTriggers for each section
    const sections = document.querySelectorAll('.scroll-section');
    sections.forEach((section, index) => {
        ScrollTrigger.create({
            trigger: section,
            start: "top center",
            end: "bottom center",
            onEnter: () => activateButton(`button${index + 1}`),
            onEnterBack: () => activateButton(`button${index + 1}`)
        });
    });
});
</script>

CSS

/* Active button styles */
.active-button {
    background-color: black !important; /* Active background color */
    color: white !important; /* Active text color */
}

I want to have the button background color to black and text color to white when the related section is viewed.