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

Question

[TipTop89]

При клике на кнопку li должны добавляться по очереди(и не удаляться), сейчас у меня добавляются все li сразу при клике. Так же при клике на одну из кнопок все применяется ко всем блокам. Подскажите пожалуйста как сделать что-бы клик применялся только в своему блоку и добавлял li поочередно? Спасибо

Answer 1

[0xD34F]

О каких кнопках и блоках идёт речь; по сколько блоков надо показывать при клике на кнопку; как показать блоки, если известна кликнутая кнопка:

const buttonSelector = '.added';
const itemSelector = '.added-block';
const activeClass = '_active';
const notActiveSelector = `${itemSelector}:not(.${activeClass})`;
const newActiveCount = 2;

function onButtonClick(button) {
  const items = [...button.parentNode.querySelectorAll(notActiveSelector)];
  items.slice(0, newActiveCount).forEach(n => n.classList.add(activeClass));
  button.disabled = items.length <= newActiveCount;
}

Назначаем обработчик клика каждой кнопке индивидуально:

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => onButtonClick(e.currentTarget));

Или, применяем делегирование:

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(buttonSelector)) &&  onButtonClick(t)
);