JSFiddle - React, Tailwind, and code Playground

HTML

<!-- jQuery Ratings (Abid Din - http://craftedpixelz.co.uk) -->

<form id="rating-form">

<div id="rating">
  <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="1" />
  <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="2" />
  <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="3" />
  <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="4" />
  <img src="http://i.imgur.com/qPbSG.png" alt="" data-rating="5" />
</div>

<!-- Hidden field for capturing/sending value -->
<select id="rating-val" style="display:none">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
    
<input type="submit" id="submit" value="Submit">
    
</form>

CSS

#rating {
    margin:20px 0 0 20px;
    width:110px;
    overflow:hidden;
}

#rating img {
    display:block;
    float:left;
}

#rating:hover {
    cursor:pointer;
}

.reset {
    display: block;
    float: right;
    margin: 1px 5px 0 0;   
}

#submit {
    float:left;
    clear:both;
    margin:15px 0 0 20px;
    padding:5px 10px 6px;
    color:#fff;
    line-height:1;
    background:#36C;
    border:none;
    cursor:pointer;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}

#submit:hover {
    background:#DD4B39;
}

JavaScript

// Rating default
rating = 0;

// When hovered
function ratinghover() {
    $("#rating img").hover(function() {
        $(this).attr("src", "http://i.imgur.com/qhd8j.png").prevAll().attr("src", "http://i.imgur.com/qhd8j.png");
    }, function() {
        $(this).attr("src", "http://i.imgur.com/qPbSG.png").nextAll().attr("src", "http://i.imgur.com/qPbSG.png");
    });

    $("#rating").mouseleave(function() {
        $("#rating img").attr("src", "http://i.imgur.com/qPbSG.png");
    });
}

// Initiate hover
ratinghover();

// When clicked
function ratingclick() {
    $(this).attr("src", "http://i.imgur.com/qhd8j.png").prevAll().attr("src", "http://i.imgur.com/qhd8j.png");
    $("#rating").off().append("<a href='#' class='reset'><img src='http://i.imgur.com/AxPey.png' /></a>")
    .not(".reset img").css("cursor", "default").find("img").off();
    rating = $(this).data("rating");
    $(".reset").on("click", reset);
}

// Initiate click
$("#rating img").on("click", ratingclick);

// When resetting
function reset() {
    rating = 0;
    $("#rating").css("cursor", "pointer").find("img").attr("src", "http://i.imgur.com/qPbSG.png")
    .on("hover", ratinghover).on("click", ratingclick);
    $(this).remove();
}

// When submitting
$("#rating-form").submit(function(e) {
    e.preventDefault();
    $("#rating-val").val(rating);
    alert("You rated " + rating + " stars!");
});