JSFiddle - React, Tailwind, and code Playground

by Andres Cisneros

HTML

<form>

</form>

CSS

#rating .active{color:red;}

#rating {color:grey;}

JavaScript

function setup (){
  var	ratingEle = document.getElementById('rating');
  var spans = ratingEle.children;

  for (let span of spans) {
		span.onclick = function(){
    	var flag = false;
      for (let ele of spans){
      	if (!flag) {
        	ele.classList.add('active');
        } 
        else {
          ele.classList.remove('active');
        }
        if (this == ele ) {
        	flag = true;
        }
      }
    }

  }

}
setup();