JSFiddle - React, Tailwind, and code Playground

HTML

<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<br>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>
<textarea cols="3" rows="3"> </textarea>

JavaScript

(function(l){function g(a,b,c){var d=this[j]=[],e,g=a.rows,k=0,h,i=a.cols;for(e=0;e<g;e++){d[e]=[];for(h=0;h<i;k++,h++){if(!b[k])break;d[e][h]=b[k]}}this[f]=~this.toString.call(a[f]).indexOf("Array")?a[f]:[0,0];this.onmove=typeof c=="function"?c:function(){}}var f="current",j="elementsMatrix",i=g.prototype={};i.moveTo=function(a){var b=this[j];this.onmove.call(this,b[this[f][0]][this[f][1]],b[(this[f]=a)[0]][a[1]])};i.move=function(a){var b=this[j],c=[this[f][0],this[f][1]],d=a=="up"?-1:a=="down"?
1:0,e=a=="left"?-1:a=="right"?1:0;b[c[0]+d]||(d=0);b[c[0]+d][c[1]+e]||(d=a=="left"?-1:1,e=b[c[0]+d]?(a=="left"?1:-1)*(b[0].length-1):d=0);this.moveTo([c[0]+d,c[1]+e])};window[l]=function(a,b,c){return new g(a,b,c)}})("_keyNav");

var o = { rows:2,cols:3, current : [0,0] }, 
    elems = document.getElementsByTagName("textarea"),
    onmove =  function(oldEl, newEl){ newEl.focus() }
    
var nav = new _keyNav( o, elems, onmove );

console.log(nav)
    
document.body.onkeydown = function(e){ 
     if(!e || !e.keyCode) e=event;
     
     switch( e.keyCode||e.which ){ 
          case 37 : nav.move("left"); break;
          case 38 : nav.move("up"); break;
          case 39 : nav.move("right"); break;
          case 40 : nav.move("down");
     }
     return false; 
};