Issue activating background-color for screens when clicking the button

I'm having an issue activating the background screens for sections when the button is clicked. As the button is clicked, the corresponding screen background-color should be shown.

Any suggestions what I can do to fix this?

const sections = document.querySelectorAll('.section');
const sectBtnsCtrls = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSections = document.querySelector('.main-content')[0];

// Button click active class

function PageTransitions() {
    for (const key of sectBtn) {
        key.addEventListener('click', function() {
            let currentBtn = document.querySelectorAll('.active-btn');
            currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
            this.className += 'active-btn'
        })
    }
    // Sections active class
    allSections.addEventListener('click', (e) => {
        const id = e.target.dataset.id;
        if (id) {

            //remove selected from the other btns
            sectBtnsCtrls.forEach((btn) => {
                btn.classList.remove('active')
            })
            e.target.classList.add('active')

            //hide other sections
            sections.forEach((section) => {
                section.classList.remove('active')
            })
            const element = document.getElementById('id');
            element.classList.add('active');
        }
    })
}

PageTransitions();