Как сделать, чтобы при нажатии на объекты button они менялись по отдельности?

Question

[calamandor]

<ul id="list2">
  <li><span id = "button"class="category-btn" data-category="all"></span>Все</li>
  <li><span id = "button" class="category-btn" data-category="fruits"></span>anorum</li>
  <li><span id = "button"class="category-btn" data-category="meat"></span>anorum</li>
  <li><span id = "button"class="category-btn" data-category="corn"></span>anorum</li>
</ul>

let circle = document.getElementById('button');

document.querySelector('.category-btn').onclick = function () {
  circle.classList.toggle('hide');
}

.category-btn {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 50%;

  position: relative;
  margin-right: 10px;
  top: 1px;
  background: black;
}

.category-btn.hide::after {
  content: '✔';
  color: #ffcd38;
  position: absolute;
  z-index: 10000;
  top: -3px;
}

При нажатии на объекты button они должны менялся по отдельности.

Comments

[VoidVolker]

calamandor Правила 3.8

Answer 1

[Stalker_RED]

У вас несколько элементов с id=button. Так делать нельзя, id не должен повторяться. Да и вообще он не нужен.
https://jsfiddle.net/zqsrgckn/