Notation étoilée

HTML

<form method="post" action="#">
  <input type="radio" name="note" id="1" checked> <p class="etoile">★</p> </input>
  <input type="radio" name="note" id="2"> <p class="etoile">★</p> </input>
  <input type="radio" name="note" id="3"> <p class="etoile">★</p> </input>
  <input type="radio" name="note" id="4"> <p class="etoile">★</p> </input>
  <input type="radio" name="note" id="5"> <p class="etoile">★</p> </input>
</form>

CSS

*
{
  margin: 0;
  padding: 0;
}

form
{
  display: flex;
}

input
{
  display: none;
}

.etoile 
{
  color: grey;
  font-size: 3em;
  cursor: pointer;
  transition-duration: 0.1s;
}
 
.gold 
{
  color: gold;
}
 
.grey 
{
  color: grey;
}
 
.black 
{
  color: black;
}

JavaScript

var etoiles = $('.etoile');
 
etoiles.each(function(id)
{
	
  $(this).click(function() 
  { 
    for (let i = 0; i < etoiles.length; i++) 
    {
			if (i <= id) 
      {
        etoiles[i].addClass('gold').removeClass("grey black");
      }
      
      if (i > id) 
      {
        etoiles[i].addClass('grey').removeClass("black gold");
      }
    }
  });
  
  $(this).mouseenter(function()
  { 
    for (let i = 0; i < etoiles.length; i++) 
    { 
      if (i <= id) 
      {
      	if (etoiles[i].hasClass('gold'))
        {
        	etoiles[i].removeClass("grey black");
        }
        
        else
        {
        	etoiles[i].addClass('black');
        }
      }
      
      if (i > id) 
      {
        classes.addClass('grey').removeClass("black gold");
      }
    }
  });
  
  $(this).mouseleave(function()
  { 
    for (let i = 0; i < etoiles.length; i++) 
    {
     	if (i <= id) 
      {
      	if (etoiles[i].hasClass('gold'))
        {
        	etoiles[i].removeClass("grey black");
        }
        
        else
        {
        	etoiles[i].removeClass('black');
        }
      }
      
      if (i > id) 
      {
        classes.add('grey').remove("black gold");
      }
    }
  });
});