JavaScript: Event listener for multiple buttons

Question

I'am building a page with a few procede and back button,i need to add a multiple event listener on all button with same class, how i can achive?

I tried with querySelectorAll all, and called the methods inside handleNextStepButton () in a forEach but what would be the best method?

   class Wizard {
    constructor(obj) {
      this.wizard = obj;
      this.panels = new Panels(this.wizard);
      this.steps = new Steps(this.wizard);
      this.stepsQuantity = this.steps.getStepsQuantity();
      this.currentStep = this.steps.currentStep;

      this.concludeControlMoveStepMethod = this.steps.handleConcludeStep.bind(this.steps);
      this.wizardConclusionMethod = this.handleWizardConclusion.bind(this);
    }

    updateButtonsStatus() {
      if (this.currentStep === 0) this.previousControl.classList.add("disabled");
      else this.previousControl.classList.remove("disabled");
    }

    updtadeCurrentStep(movement) {
      this.currentStep += movement;
      this.steps.setCurrentStep(this.currentStep);
      this.panels.setCurrentStep(this.currentStep);

      this.handleNextStepButton();
      this.updateButtonsStatus();
      //   this.currentStep.classList.add("current");
    }

    handleNextStepButton() {
      if (this.currentStep === this.stepsQuantity - 1) {
        this.nextControl.innerHTML = "Conclude!";

        this.nextControl.removeEventListener("click", this.nextControlMoveStepMethod);
        this.nextControl.addEventListener("click", this.concludeControlMoveStepMethod);
        this.nextControl.addEventListener("click", this.wizardConclusionMethod);
      } else {
        this.nextControl.innerHTML = "Next";

        this.nextControl.addEventListener("click", this.nextControlMoveStepMethod);
        this.nextControl.removeEventListener("click", this.concludeControlMoveStepMethod);
        this.nextControl.removeEventListener("click", this.wizardConclusionMethod);
      }
    }

   
    addControls(previousControl, nextControl) {
      this.previousControl = previousControl;
      this.nextControl = nextControl;
      this.previousControlMoveStepMethod = this.moveStep.bind(this, -1);
      this.nextControlMoveStepMethod = this.moveStep.bind(this, 1);

      previousControl.addEventListener("click", this.previousControlMoveStepMethod);
      nextControl.addEventListener("click", this.nextControlMoveStepMethod);

      this.updateButtonsStatus();
    }

  }

  let wizardElement = document.getElementById("wizard");
  let wizard = new Wizard(wizardElement);
  let buttonNext = document.querySelector(".next");
  let buttonPrevious = document.querySelector(".previous");

  wizard.addControls(buttonPrevious, buttonNext);

Answer 1

Just have in mind that you'll get a list of elements. So you just need to iterate throught the list of elements and append your listerner:

let buttons = document.querySelectorAll(".next");
for(let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", yourFunction);
}