Как по одному добавлять класс очередному объекту при клике?

Question

[RushV]

Есть ряд элементов. Сначала не выбран ни один.
По клику на кнопку, надо добавлять класс: сначала 1-му. При 2-м клике, 2-му, и т. д.

Как это можно сделать?

Сейчас класс добавляет сразу всем объектам.

$('#prevBtn').click(function(){
        const step = document.querySelectorAll('[id^="step"]');
        [].forEach.call(step, (e)=>{
         e.classList.add("new-class")
        });
    });

Comments

[Сергей Соколов]

Разметку покажите, а то не ясно: кликают по единственному #prevBtn (id ведь уникален), а вешают класс всем, у которых id начинается (^=) со "step..."

Причём не вполне грамотно присунули конструкцию [].forEach.call(), ведь метод forEach() есть и так у NodeList, который возвращается из querySelectorAll()

[RushV]

Сергей Соколов,
Вот разметка:

<form>
            <div id="step-1" class="d-none"></div>
            <div id="step-2" class="d-none"></div>
            <div id="step-3" class="d-none"></div>
            <div id="step-4" class="d-none"></div>
            <div id="step-5" class="d-none"></div>
<button type="button" class="btn btn-success rounded-pill py-3 px-5 mx-auto text-dark fw-bold" id="prevBtn" disabled>Далее</button>
</form>

[Сергей Соколов]

RushV, а задача по клику на prevBtn каждый раз подсвечивать 1 «следующий» шаг из этих 1..5 ?

[RushV]

Сергей Соколов, Да, получается кликнули добавился класс в step-1, кликнули второй раз добавился класс в step-2 и.т.п.
Как правильно сформулировать даже не знаю.

Answer 1

[Сергей Соколов]

Понадобится переменная, учитывать текущее состояние: сколько шагов уже выбрано.
При клике увеличивать эту переменную на 1. Перебирать все шаги, брать порядковый номер, например, из id "step-XXX".
Сравнивать с текущим значением переменной и добавлять класс, если переменная дотянула уже до текущего.