JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 <a href="#" class="review_star" id="1"><i class="fa fa-star-o fa-3x" id="star_1"></i></a>
 <a href="#" class="review_star" id="2"><i class="fa fa-star-o fa-3x" id="star_2"></i></a>
 <a href="#" class="review_star" id="3"><i class="fa fa-star-o fa-3x" id="star_3"></i></a>
 <a href="#" class="review_star" id="4"><i class="fa fa-star-o fa-3x" id="star_4"></i></a>
 <a href="#" class="review_star" id="5"><i class="fa fa-star-o fa-3x" id="star_5"></i></a>

<form>
    <input type="hidden" id="review_rating" name="rating">

CSS

.alert-success {
    color:green;
}

JavaScript

$('#star_1, #star_2, #star_3, #star_4, #star_5').on("mouseover click", function () {
    for (var i =1; i<=5; i++) {
        if (i <= parseInt(this.id.replace("star_", ""))) {
            $('#star_'+i).addClass("alert-success");
        }
    }
});
$('#star_1, #star_2, #star_3, #star_4, #star_5').on("mouseout", function () {
    for (var i =1; i<=5; i++) {
        if (i <= parseInt(this.id.replace("star_", ""))) {
            $('#star_'+i).removeClass("alert-success");
        }
    }
});
$('.review_star').on("click", function () {
    $('#star_1, #star_2, #star_3, #star_4, #star_5').off();
    $('#review_rating').val($(this).attr('id'));
});