JSFiddle - React, Tailwind, and code Playground

by slace

HTML

<div id="north"><textarea></textarea></div>
<div id="west"><textarea></textarea></div>
<div id="center"><textarea></textarea></div>

JavaScript

$(document).ready(function() {
         var divs = ["north", "west", "center"];
         var startIndex = 0;
    var fn =   function (e) {
                 $("div").css("border", "");
                 $("#" + divs[startIndex]).css("border", "4px solid gray");
    
                 if(divs[startIndex] == "north") {
                     console.log("north");
                  } else if(divs[startIndex] == "west") {
                     console.log("west");
                  }else {
                     console.log("center");
                  }
              startIndex++;
              if(startIndex === divs.length) {
                  startIndex = 0;
              }    
    };
         $(document).keydown(function(e) {
             if (e.which == 9) {
              fn();                     
          }
          return false;
         }).click(function() {
             fn();
         });
});