Responsive Rating Component App

Hi Frontend Community,

I went into this project looking to use 2 event listeners, one on the input buttons in the fieldset element and the other on the submit button.

I struggled a bit before I realized I needed to apply a class name on the buttons before looping over them. Originally, I was trying to gain access to them through the CSS color change that occurred when the user presses the button but that was a dead end for me.

Is there any other way I could have gotten to the data other than the way I coded it?

//Event listener to add class of "selected" to the button the user clicks:
document.querySelectorAll("#fieldset input[type=button]").forEach(button => {
    button.addEventListener("click", function() {
      document.querySelectorAll("#fieldset input[type=button]").forEach(button => {
        //By calling the remove first, we ensure that only one button has the "selected" class at any given time.
        button.classList.remove("selected");
      });
      //Only the clicked button will have the "selected" class.
        button.classList.add("selected");
    });
  });