JSFiddle - React, Tailwind, and code Playground

by Adam Poczatek

HTML

<body rel="id_123">
    <div id="rating-1" class="vote enabled">
        <a href="#" class="vote-bad">Zle!</a>
        <a href="#" class="vote-good">Dobre!</a>
    </div>
    
    <div id="rating-2" class="vote enabled">
        <a href="#" class="vote-bad">Zle!</a>
        <a href="#" class="vote-good">Dobre!</a>
    </div>
    
    <div id="rating-3" class="vote">
        <a href="#" class="vote-bad">Zle!</a>
        <a href="#" class="vote-good">Dobre!</a>
    </div>
</body>

CSS

a { color: red }

.disabled { color: #333; text-decoration: none; cursor: default; }

JavaScript

$(".vote").each(function() {
    if (!$(this).hasClass("enabled")) {
        $(this)
            .text("Glos oddany!");
    }
});

$(".vote a").click(function() {
    var $t = $(this),
        vote,
        ratingID = $t.parent().prop("id"),
        id = $("body").prop("rel");
    
        if ($t.hasClass("vote-good")) {
            vote = "dobre";
        } 
        else {
            vote = "slabe";
        }
        
        $.ajax({
            type: "GET",
            url: "rating.php?glos=" + vote + "&id=" + ratingID,
            success: function() {
                $t
                    .parent()
                        .text("Glos oddany!");
                
            },
            error: function () {
                $t
                    .parent()
                        .text("Error");
            }
        });
        
    
    return false;
});