JSFiddle - React, Tailwind, and code Playground

by pxfunc

HTML

<script src="http://i.stack.imgur.com/S5T0M.png"></script>
<div class="ratings">
    <ul>
        <li id="firstStar">★</li>
        <li id="secondStar">★</li>
        <li id="thirdStar">★</li>
        <li id="fourthStar">★</li>
        <li id="fifthStar">★</li>
    </ul>

CSS

.ratings ul li {
    float:left;
    width:16px;
    height:16px;
}
.ratings ul li.goldstarHover {
    color:rgb(255,240,0);
}
.ratings ul li.goldstar {
    color:gold;
}

JavaScript

/* Hover Function */
$(document).ready(function () {
    $('.ratings li').hover(function () {
        $(this).prevAll().andSelf().addClass('goldstarHover');
    }, function () {
        $(this).prevAll().andSelf().removeClass('goldstarHover');
    });
});

/* Click Function */
$(document).ready(function () {
    $('.ratings li').click(function () {
        $('.ratings li').removeClass('goldstar');
        $(this).prevAll().andSelf().addClass('goldstar');
    });
});