JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rating">
    <span class="star" onclick="rate(this)">X</span>
    <span class="star" onclick="rate(this)">X</span>
    <span class="star" onclick="rate(this)">X</span>
    <span class="star" onclick="rate(this)">X</span>
    <span class="star" onclick="rate(this)">X</span>
</div>

CSS

.rating {
    font-size: 12px;
    direction: rtl;
    float: left;
}

.rating span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}

.rating > span:hover {
    cursor: pointer;
}

.rating > span:hover:before, .rating > span:hover ~ span:before {
    color: orange;
    content:"X";
    position: absolute;
}

.star {
    color: grey;
}

.rated {
    color: blue;
}

JavaScript

function rate(obj) {
    $(obj).addClass("rated")
        .prevAll().removeClass("rated").end()
        .nextAll().addClass("rated");
}