JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_1"><textarea class="gray"></textarea></td>
    </tr>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_2"><textarea class="gray"></textarea></td>
    </tr>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_3"><textarea class="gray"></textarea></td>
    </tr>
</table>
        
        <table>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_4"><textarea class="gray"></textarea></td>
    </tr>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_5"><textarea class="gray"></textarea></td>
    </tr>
    <tr>
        <td>Bezeichnung</td>
        <td><input type="checkbox" class="check" id="check_6"><textarea class="gray"></textarea></td>
    </tr>
</table>

CSS

.gray {background-color: #c0c0c0; }
.highlight {background: darkgray;}

JavaScript

$("#check1").focus();

$(':checkbox').on('focusin', function() { $(this).parent("td").parent("tr").addClass("highlight"); });
$(':checkbox').on('keydown', function() { 
	if (event.keyCode == 40) {
		$(this).parent("td").parent("tr").siblings("tr").find(".check")[0].focus();
	}
	else if (event.keyCode == 32) {

	}
	else {
		$(this).siblings("textarea").removeClass("gray").focus(); 
	}
});