JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rating-submit">
    <ol class="rating-stars">
        <li data-rate="1"></li>
        <li data-rate="2"></li>
        <li data-rate="3"></li>
        <li data-rate="4"></li>
        <li data-rate="5"></li>
    </ol>
    <!--End rating-stars-->
</div>
<!--End rating-submit-->

CSS

#rating-submit .rating-stars {
	position: static;
	width: 112px;
	height: 20px;
    margin: 0;
    padding: 0;
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) no-repeat;	
}

#rating-submit .rating-stars li {
	height: 20px;
	width: 19px;
	display: inline-block;
	margin: 0;
    list-style: none;
}

#rating-submit .rating-stars li.active {
    background: url(http://s4.postimg.org/qukg9gyih/rating_stars.png) 0 -38px no-repeat;	
}

JavaScript

// Rating stars
$('#rating-submit .rating-stars li').click(function () {
    var $chosenStar = $(this);
    $chosenStar
        .siblings('li').removeClass('active').end()
        .prevAll().add(this).addClass('active');
    console.log($chosenStar.data('rate'));
});