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;
    cursor: pointer;
}

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

.rating .rated {
    color: orange;
}
.rating .rated:hover,
.rating:hover .rated {
    color: blue;
}

JavaScript

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