JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td><input type="text" data-value="1" class="btnClick" /></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" data-value="2" class="btnClick" /></td>
        <td>same text..</td>
        <td><input type="text" data-value="3" class="btnClick" /></td>
    </tr>
    <tr>
       <td><input type="text" data-value="4" class="btnClick"></td>
       <td><input type="text" data-value="5" class="btnClick"></td>
       <td>same text..</td>
   </tr>
</table>

JavaScript

$(".btnClick").keydown(function(e) {
  if(e.keyCode == 37) { // left
    var currentField = $(this).data("value");
        var currentTD = $(this).parent();
    var prevField = currentField - 1;
        var prevTD = $('*[data-value="'+prevField+'"]').parent();
            //Do something with the TD
        $('*[data-value="'+prevField+'"]').focus();
  }
  else if(e.keyCode == 39) { // right
    var currentField = $(this).data("value");
        var currentTD = $(this).parent();
    var nextField = currentField + 1;
        var prevTD = $('*[data-value="'+nextField+'"]').parent();
            //Do something with the TD
        $('*[data-value="'+nextField+'"]').focus();
  }
});