const formSteps = [...multiStepForm.querySelectorAll("[data-step]")]
let currentStep = formSteps.findIndex(step => {
return step.classList.contains("active")
})

if (currentStep < 0) {
currentStep = 0
showCurrentStep()
}

multiStepForm.addEventListener("click", e => {
let incrementor
if (e.target.matches("[data-next]")) {
    incrementor = 1
} else if (e.target.matches("[data-previous]")) {
    incrementor = -1
}

if (incrementor == null) return

const inputs = [...formSteps[currentStep].querySelectorAll("input")]
const allValid = inputs.every(input => input.reportValidity())
if (allValid) {
    currentStep += incrementor
    showCurrentStep()
}
})

formSteps.forEach(step => {
step.addEventListener("animationend", e => {
    formSteps[currentStep].classList.remove("hide")
    e.target.classList.toggle("hide", !e.target.classList.contains("active"))
})
})

function showCurrentStep() {
formSteps.forEach((step, index) => {
    step.classList.toggle("active", index === currentStep)
})
}

In this case of code, the validation of the data entry does not work and then the incriment for the other steps does not work. I also tried to add required in the inputs ignoring this code, the problem that making a "previous", the user does not have the possibility to go back blocked by the inserted required.

In the code, the incrementor object is already null, seen in log.console does not see it. I think the problem in this case is the querySelection as I noticed from the log.console that it takes data that is not of interest to me.