Adding a class to the active tab [closed]

I have update in codepan js code. please use below js code to active tab. i have tested and it is working fine. let me know if this works for you!

class TabList {
  constructor(buttonsContainer, tabs) {
    this.buttonsContainer = buttonsContainer;
    this.tabs = tabs;

    this.buttonsContainer.addEventListener("click", event => {
       document.querySelector( '.woocommerce-tabs__button--active' ).classList.remove( 'woocommerce-tabs__button--active' );
      event.target.closest(".woocommerce-tabs__button").classList.add("woocommerce-tabs__button--active");

      const index = event.target.closest(".woocommerce-tabs__button").dataset
        .value;

      this.openTab(index);
    });
  }

  openTab(index) {
    this.tabs.querySelector(".active").classList.remove("active");
    this.tabs
      .querySelector(`.woocommerce-tabs__content--${index}`)
      .classList.add("active");
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const buttonsContainer = document.querySelector(".woocommerce-tabs__buttons");
  const tabs = document.querySelector(".woocommerce-tabs__contents");

  const tabList = new TabList(buttonsContainer, tabs);
});