I would like to be able to have a rating component that consist of five stars like this where the active class is added to the span element when clicked and all the span elements before it. (like a. 5 star rating would just have to be clicked once on the 5th span) The active class would need to be removed from any spans after it when clicked as well. How can I achieve this?

<span>*</span>
<span>*</span>
<span>*</span>
<span>*</span>
<span>*</span>
</div>

// React is loaded and is available as React and ReactDOM (I'm not using imports)

  render() {
    return null;
  }
}

document.body.innerHTML = "<div id='root'> </div>";
  
const rootElement = document.getElementById("root");
ReactDOM.render(<Rating />, rootElement);

document.querySelectorAll("span")[2].click();
console.log(document.getElementById("rating").outerHTML);