JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<table id="tabela">
    <tr id="0"><td>Prvi red</td></tr>
    <tr id="0"><td>Drgui red</td></tr>
    <tr id="0"><td>Treci red</td></tr>
    <tr id="0"><td>Peti red</td></tr>
    <tr id="0"><td>Cetvrti red</td></tr>
</table>
</body>

CSS

.normalRow
        {
            background-color: White;
            color: Black;
        }
        .selectedRowNew
        {
            background-color: #b0c4de;
            color: Black;
        }

JavaScript

$(document).ready(function () {
            // The selector expression tr[id] will ensure the click event is added to only data rows since we have added id attribute 
            // to only data rows from code behind

            $('#tabela tr[id]').click(function () {
                $('#tabela tr[id]').removeClass("selectedRowNew").addClass("normalRow");
                $(this).removeClass("normalRow").addClass("selectedRowNew");
            });

            $('#tabela tr[id]').mouseover(function () {
                $(this).css({ cursor: "default", cursor: "default" });
            });
    
    $("body").keydown(function(e){
    if(e.keyCode == 40 )
        toggleRowSelectionDown();
    if(e.keyCode == 38)
        toggleRowSelectionUp();
});
    
function toggleRowSelectionDown() 
    {
        var row = $("#tabela .selectedRowNew");
        if (!row.is(":last-child")) {
         $("#tabela tr[id]").removeClass("selectedRowNew").addClass("normalRow");
         var next = row.next();
         next.removeClass("normalRow").addClass("selectedRowNew");
        }
    }
});

function toggleRowSelectionUp() {
var row = $("#tabela .selectedRowNew");
    if (!row.is(":first-child")) {
         $("#tabela tr[id]").removeClass("selectedRowNew").addClass("normalRow");
         var prev = row.prev();
         prev.removeClass("normalRow").addClass("selectedRowNew");
    }
    }