Scalable Buttoned Tabs

// name of root element
const rootComponentName = "tabbed-component";

// define object storing classnames
const classes = {
    container: rootComponentName,
    buttonList: `${rootComponentName}__list`,
    buttonContainer: `${rootComponentName}__item`,
    buttonActive: `${rootComponentName}__item--active`,
    button: `${rootComponentName}__button`,

    sectionContainer: `${rootComponentName}__container`,
    section: `${rootComponentName}__section`,
    sectionActive: `${rootComponentName}__section--active`
};

// propagate event listener to button container to prevent x seperate functions to each of the buttons
document
    .querySelector(`.${classes.buttonList}`)
    .addEventListener("click", (e) => {
        // if the click event was on one of the buttons (not the container outside)
        const el = e.target.closest(`.${classes.buttonContainer}`);

        // return if something other than the button is clicked
        if (!el) return;

        // store data in data-section="" html attribute
        let id = el.dataset.section;

        // return if tabbed selection already has the section
        if (
            document
            .getElementById(`section-${id}`)
            .classList.contains(classes.sectionActive)
        )
            return;

        // query the DOM to find all buttons and remove active button
        let buttons = document.querySelectorAll(`.${classes.buttonContainer}`);
        removeClassFromNodeList(buttons, classes.buttonActive);

        // add the active class to the new button from event
        el.classList.toggle(classes.buttonActive);

        // store all sections in a node list
        let sections = document.querySelectorAll(`.${classes.section}`);
        removeClassFromNodeList(sections, classes.sectionActive);

        // add active class to section from dataset of button clicked
        document
            .getElementById(`section-${id}`)
            .classList.add(classes.sectionActive);

        console.log(id);
    });

// function to accept a nodelist and class, and  loop through the list to remove html class from all nodes
const removeClassFromNodeList = (nodeList, className) => {
    nodeList.forEach((cur) => {
        cur.classList.remove(className);
    });
};