JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ratingDiv review">
    <div class="row">
        <label class="lbl">Features :</label>
        <div class="ratingwrap">
            <div style="position:relative;">
                <div class="fkdiv">
                    <input type="radio" id="poor" class="rtchk" name="Features" value="1" />
                    <input type="radio" id="average" class="rtchk" name="Features" value="2" checked="checked" />
                    <input type="radio" id="good" class="rtchk" name="Features" value="3" />
                    <input type="radio" id="verygood" class="rtchk" name="Features" value="4" />
                    <input type="radio" id="excellent" class="rtchk" name="Features" value="5" />
                </div>
                <div class="rateMe" title="Rate Me..."> <a id="_1" title="poor" class="hvr"></a>
 <a id="_2" title="average" class="hvr"></a>
 <a id="_3" title="good" class="hvr"></a>
 <a id="_4" title="verygood" class="hvr"></a>
 <a id="_5" title="excellent" class="hvr"></a>

                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <label class="lbl">Support :</label>
        <div class="ratingwrap">
            <div style="position:relative;">
                <div class="fkdiv">
                    <input type="radio" id="poor" class="rtchk" name="Support" value="1" />
                    <input type="radio" id="average" class="rtchk" name="Support" value="2" checked="checked" />
                    <input type="radio" id="good" class="rtchk" name="Support" value="3" />
                    <input type="radio" id="verygood" class="rtchk" name="Support" value="4" />
                    <input type="radio" id="excellent" class="rtchk" name="Support" value="5" />
                </div>
                <div class="rateMe" title="Rate Me..."> <a id="_6" title="poor" class="hvr"></a>
 <a id="_7" title="average" class="hvr"></a>
 <a id="_8" title="good" class="hvr"></a>
 <a id="_9" title="verygood"...

CSS

.row {
    height:34px;
    position:relative;
    clear:both;
}
.ratingwrap {
    width:300px;
    float:left;
}
.lbl {
    font-size:14px;
    line-height:24px;
    color:#1AA7CB;
    font-weight:bold;
    float:left;
    display:block;
    width:160px;
    text-align:right;
    margin-right:10px;
}
.rateStatus {
    height:20px;
    position:absolute;
    left:190px;
    width:200px;
    top:2px
}
.fkdiv {
    position:relative;
    top:2px;
    z-index:1
}
.rateMe {
    position:absolute;
    top:-2px;
    z-index:9999;
}
.rateMe a {
    float:left;
    margin-right:10px;
    background:url(http://walkoverapps.com/images/rating-star.png) no-repeat;
    width:24px;
    height:24px;
    position:relative;
    display:block;
}
.rateMe .on, .rateMe a:hover {
    background-position: 0 -34px
}
#ratingSaved {
    display:none;
}
.saved {
    color:red;
}
.rtchk {
    width:24px;
    margin-right:6px;
}
#ratingbox {
    margin-top:50px;
}
.rtngshow {
    width:160px;
    height:24px;
    display:none;
    background:url(rating-star.png) no-repeat;
}
#zero {
    background-position:0 0
}
#poor-rate {
    background-position: 0 -34px
}
#average-rate {
    background-position: 0 -68px
}
#good-rate {
    background-position: 0 -102px
}
#verygood-rate {
    background-position: 0 -136px
}
#excellent-rate {
    background-position: 0 -170px
}

JavaScript

$(function () {
    var num, sib, len, rated = false;

    $('.hvr').mouseover(function () {
        num = $(this), sib = $(this).siblings(), len = $(this).siblings().length;
        sMax = 0; // Isthe maximum number of stars

        for (n = 0; n < $(this).index(); n++) {
            if (!$(this).parent().hasClass('rated')) {
                $(this).siblings().removeClass('on');
            }
            $(this).prevAll().addClass('on');
            $(this).addClass('on');
        }
    });

    $('.hvr').mouseout(function () {
        if (!$(this).parent().hasClass('rated')) {
            $(this).siblings().removeClass('on');
            //console.log('this is '+rated);
            $(this).prevAll().removeClass('on');
            $(this).removeClass('on');
        }
        //$('.hvr').removeClass('on');
    });

    // When you actually rate something //
    $('.hvr').click(function () {
        if (!$(this).parent().hasClass('rated')) {
            $(this).parent().addClass('rated');
        } else {
            $(this).parent().removeClass('rated');
        }
        console.log(rated);
    });
});