JSFiddle - React, Tailwind, and code Playground

by Ian Sanders

HTML

<div class="startcontainer"><div class="stars glyphicon-star-empty"></div><div class="stars glyphicon-star-empty"></div><div class="stars glyphicon-star-empty"></div><div class="stars glyphicon-star-empty"></div><div class="stars glyphicon-star-empty"></div></div>

CSS

.starcontainer {
    border: 1px solid red;
}

.stars {
    height: 20px;
    width: 20px;
    display: inline-block;
     border: 2px solid green;
}

.glyphicon-star-empty {
   
    background: #ffffff;
}

.glyphicon-star {
    background: green;
}

JavaScript

$("document").ready(function() {
    $(".stars").hover(function() {
        $(this).removeClass("glyphicon-star-empty")
        $(this).addClass("glyphicon-star");
        $(this).prevAll().removeClass("glyphicon-star-empty")
        $(this).prevAll().addClass("glyphicon-star");
    }, function() {
        $(".stars").removeClass("glyphicon-star")
        $(".stars").addClass("glyphicon-star-empty");
    });
});