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

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;

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const items = [...button.parentNode.querySelectorAll(notActiveSelector)];
    items.slice(0, newActiveCount).forEach(n => n.classList.add(activeClass));
    button.disabled = items.length <= newActiveCount;
  }
});