[NovichokJS]

У меня есть список ul с чекбоксами в каждом li.

<ul class="list">
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Buy milk</li>
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Pick up Tom from airport</li>
<li class="list__item"><input type="checkbox" class="list__item-checkbox">Visit party</li>
</ul>

Мне нужно изменить поведения каждого li элемента при клике на соответствующий чекбокс. Делаю таким образом и у меня добавляется класс 'list__item_done' только к первому элементу li. При клике на другие чекбоксы класс 'list__item_done' не назначается. Как это исправить?

const chbx = document.querySelector('.list__item-checkbox');
const li = document.querySelector('.list__item');

chbx.addEventListener('click', () => {
  if (chbx.checked) {
    li.classList.add('list__item_done');
  } else {
    li.classList.remove('list__item_done');
  }
});