Having trouble toggling class

Question

So my goal is to have the ability to be able to toggle the input with the custom checkbox I created. Right now I have it working, however, it only adds the class to the first child (option 1)

See image below enter image description here

When I click the option 2 and three the default checkbox still shows up

enter image description here

I've tried using document.querySelectorAll and that does not work.

Here is a link to the Codepen codepen.io/Brushel/pen/QqLgyZ

Here is the code:

checkbox = document.getElementById('checkbox')

checkbox.addEventListener 'click', (event) ->
  event.preventDefault()
  document.querySelector('input').classList.toggle 'checkmark'
  
  

:root {
  --main-color: seagreen;
  --secondary-color: white;
}

body {
  background: var(--secondary-color);
  display: flex;
  justify-content: center;
}

ul {
  list-style: none;
  font-size: 1em;
}

.checkmark {
  display: inline-block;
    &:after {
      content: '';
      display: block;
      width: 6px;
      height: 12px;
      border: solid seagreen;
      border-width: 0 4px 4px 0;
      transform: rotate(45deg);
    }
}

%body
  %ul
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 1
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 2
    %li
      %input#checkbox(type="checkbox")/
      %label(for="checkbox") Option 3

Answer 1

First thing, an Id is a unique Identifier, you want to apply a class to your checkboxes or select them by their type or some other similar method useful for selecting multiple (querySelectorAll)

 const checkboxHandler = checkbox => {
    checkbox.addEventListener('click', event => {
      event.preventDefault();
      checkbox.classList.toggle('checkmark');
    })
 };

 let checkboxes = document.querySelectorAll('.checkbox')
 checkboxes.forEach(checkboxHandler);

• Select all checkboxes by your delimiter
• Iterate over checkboxes
• In each iteration you will apply a click handler
• Inside the click handler is where you set your required actions.