JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<br/>
<br/>
<div class="barHolder">
    <table>
        <tr>
            <td>1 star</td>
            <td class="bar"></td>
            <td class="likes">20</td>
        </tr>
        <tr>
            <td>2 star</td>
            <td class="bar"></td>
            <td class="likes">10</td>
        </tr>
        <tr>
            <td>3 star</td>
            <td class="bar"></td>
            <td class="likes">40</td>
        </tr>
        <tr>
            <td>4 star</td>
            <td class="bar"></td>
            <td class="likes">20</td>
        </tr>
        <tr>
            <td>5 star</td>
            <td class="bar"></td>
            <td class="likes">60</td>
        </tr>
    </table>
</div>

CSS

.star {
    height:20px;
    width:20px;
    background:gray;
    float:left;
    margin-right:5px;
    cursor:pointer;
}
.active {
    background:yellow;
}
.barHolder {
    float:left;
}
.bar {
    height:20px;
    width:150px;
    background:gray;
    margin-bottom:10px;
}

JavaScript

$(function () {

    var baractive = $('<div class="barActive"></div');
    baractive.appendTo('.bar');

    function checkNumber() {
        $(".likes").each(function () {
            var valueCurrent = parseInt($(this).text());

            if (isNaN(valueCurrent) || valueCurrent <= 20) {
                $(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '30px').css('background', 'green');
            }
            if (isNaN(valueCurrent) || valueCurrent <= 60) {
                $(this).prev(".bar").children(".barActive").css('height', '20px').css('width', '80px').css('background', 'green');
            }
        });
    }
    checkNumber();

    $('.star').click(function () {
        var num = parseInt($('.likes').eq($(this).index('.star')).text());
        $('.likes').eq($(this).index('.star')).text(num + 1);

        $(this).addClass('active');

    });

});