Edit in JSFiddle

$(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');
    });
});

<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>

.star .selected {
    color: red;
}