<h1>HTML + CSS</h1>
<div id="html-css-only" class="flex">
  <label>
    <input type="radio" name="squares">
    <div class="square"></div>
  </label>
  <label>
    <input type="radio" name="squares">
    <div class="square"></div>
  </label>
  <label>
    <input type="radio" name="squares">
    <div class="square"></div>
  </label>
  <label>
    <input type="radio" name="squares">
    <div class="square"></div>
  </label>
</div>
<h1>JS</h1>
<div id="js" class="flex">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

div.flex {
  display: flex;
  gap: 10px;
}

div.square {
  width: 60px;
  height: 60px;
  background-color: red;
  cursor: pointer;
}

input {
  display: none;
}

input:checked + div.square,
div.green {
  background-color: green;
}

document.querySelector('#js').addEventListener(
  'click',
  (e) => {
    if (!e.target.classList.contains('square')) {
      return;
    }
    document.querySelector('div.green')?.classList.remove('green');
    e.target.classList.add('green');
  }
)