JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<form>
  <div class="rating"> 
     <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
  </div>
  <input type="hidden" id="rate_holder" />
</form>

CSS

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  float:left;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
}

JavaScript

$('.rating span').on('click',function(){
	$('#rate_holder').val(4-$(this).index()+1);
	console.log($('#rate_holder').val());
});