JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cell celldata cell_service_data" id="cell_service_rate_1">
<input type="text" id="rate_service_row_1" class="rate_service_row"/>
</div>
<div class="cell celldata cell_service_data" id="cell_service_rate_2">
    <input type="text" id="rate_service_row_2" class="rate_service_row"/>
</div>

JavaScript

$('.rate_service_row').keydown(function (e) {
    var rateId = $(this).attr('id');

  var keyCode = e.keyCode || e.which,
      arrow = {left: 37, up: 38, right: 39, down: 40 };

  switch (keyCode) {
    case arrow.left:
      //..
    break;
    case arrow.up:
      //..
    break;
    case arrow.right:
      //..
    break;
    case arrow.down:
         //Set focus to the same cell next row
          var str = $(this).attr('id');
          str1 = str.substr(0,str.length-1);
          str2 = str.substr(str.length -1);
          var int3 = parseInt(str2) +1;
          $("#"+str1 + int3).focus();

    break;
  }
});