JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    $("#mycell td:first button").focus();
    function myTest(e,down,left,up,right)
    {
      if (!e) e=window.event;
      var selectArrowKey;
      switch(e.keyCode)
      {
      case 37:
        // Key links.
        selectArrowKey = left;
        break;
      case 38:
        // Key oben.
        selectArrowKey = down;
        break;
      case 39:
        // Key rechts.
        selectArrowKey = right;
        break;
      case 40:
        // Key unten.
        selectArrowKey = up;
        break;
      }
      if (!selectArrowKey) return;
      var controls = document.getElementsByName(selectArrowKey);
      if (!controls) return;
      if (controls.length != 1) return;
alert(    control);
    
      controls[0].focus();
    }
    var node = findFirstChild(document.getElementById('mycell'), 'TD');
    if (node) {
        // get the control within the cell
        node.focus();
    }
    function findFirstChild(parent, tag) {
        var node, child;
    
        for (node = parent.firstChild; node; node = node.nextSibling) {
            if (node.nodeType == 1) { // Element
                if (node.tagName === tag) {
                    return node;
                }
                child = findFirstChild(node, tag);
                if (child) {
                    return child;
                }
            }
        }
        return undefined;
    }
});
</script>

</head>
<body>
<table id="mycell" border="1" cellpadding="0" cellspacing="0">
<tr>
  <td><button name="obenLinks" onkeydown="myTest(event,undefined,undefined,'mitteLinks','obenMitte')"><img src="C:\Documents and Settings\ing12732\Desktop\html_files\tv-dev\image2.png" ></button></td>
    <td><button name="obenMitte" onkeydown="myTest(event,undefined,'obenLinks','mitteMitte','obenRechts')"><img...