JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<input type="text" id="UserNewRating" name="rate_n"/>
<div class="star">
    <a href="javascript:void(0);">★</a>
    <a href="javascript:void(0);">★</a>
    <a href="javascript:void(0);">★</a>
    <a href="javascript:void(0);">★</a>
    <a href="javascript:void(0);">★</a>
</div>

CSS

.star .selected {
    color: red;
}

JavaScript

$(function() {
    $('.star a').click(function(e) {
        var index = $(this).index();
        $('#UserNewRating').val(index + 1);
        $('.star a').removeClass('selected');
        $('.star a:lt(' + (index + 1) + ')').addClass('selected');
    });
});