JSFiddle - React, Tailwind, and code Playground

by Angelo Rogério Rubin

HTML

<h1>How did we do?</h1>

  <p>
    Please let us know how we did with your support request.
    All feedback is appreciated to help us improve our offering!
  </p>

  <button id="one" class="option">1</button>
  <button id="two" class="option">2</button>
  <button id="three" class="option">3</button>

  <br />
  <br />

  <button type="button">Submit</button>

CSS

.option {
  border: none;
  border-radius: 50%;
  padding: 1rem 1.2rem;
  background-color: gray;
}

.option:hover {
  background-color: orange;
}

.selected {}

.unselected {}

JavaScript

console.clear()

const options = document.querySelectorAll('.option');

options.forEach(option => {
  console.log(option);
})

options.forEach(option => {
  option.addEventListener('click', (e) => {
    // console.log(e.target.id)
    if (e.target.id === 'one') {
      option.style['background-color'] = "orange"
    } else {
      option.style['background-color'] = "gray"
    }

    if (e.target.id === 'two') {
      option.style['background-color'] = "orange"
    } else {
      option.style['background-color'] = "gray"
    }
  })
})