JSFiddle - React, Tailwind, and code Playground

HTML

<div class="rate-ex1-cnt">
    <div id="0.5" class="rate-btn-0.5 rate-btn"></div>
    <div id="1" class="rate-btn-1 rate-btn"></div>
    <div id="1.5" class="rate-btn-1.5 rate-btn"></div>
    <div id="2" class="rate-btn-2 rate-btn"></div>
    <div id="2.5" class="rate-btn-2.5 rate-btn"></div>
    <div id="3" class="rate-btn-3 rate-btn"></div>
    <div id="3.5" class="rate-btn-3.5 rate-btn"></div>
    <div id="4" class="rate-btn-4 rate-btn"></div>
    <div id="4.5" class="rate-btn-4.5 rate-btn"></div>
    <div id="5" class="rate-btn-5 rate-btn"></div>
</div>

CSS

div > div {
    padding: 5px;
    border: 1px solid black;
}
.rate-btn-hover {
    background-color: lightblue;
}

JavaScript

$(function () {
    var rates = $('.rate-btn');
    rates.hover(function () {
        rates.removeClass('rate-btn-hover');
        $(this).prevAll().andSelf().addClass('rate-btn-hover')
    });
    $('.rate-ex1-cnt').on('mouseleave', function(){
        rates.removeClass('rate-btn-hover');
    });
});
$('.rate-btn').each(function () {
    this.innerHTML = this.id;
})