JSFiddle - React, Tailwind, and code Playground

by Luca De Nardi

HTML

<div id="one" tabindex="1">
<br><span>1</span><br><br>
<span>2</span><br><br>
<span>3</span><br><br>
<span>4</span><br><br>
<span>5</span><br><br>
<span>6</span><br><br>
<span>7</span><br><br>
<span>8</span><br><br>
<span>9</span><br><br>
<span>10</span><br><br>
<span>11</span><br><br>
<span>12</span><br><br>
</div>
<div id="two" tabindex="2">
<br><span>1</span><br><br>
<span>2</span><br><br>
<span>3</span><br><br>
<span>4</span><br><br>
<span>5</span><br><br>
<span>6</span><br><br>
<span>7</span><br><br>
<span>8</span><br><br>
<span>9</span><br><br>
<span>10</span><br><br>
<span>11</span><br><br>
<span>12</span><br><br>
</div>

CSS

#one, #two{
  float: left;
  width: 300px;
  border: 1px solid black;
  height: 300px;
  overflow-y: auto;
}
#one:before{
  content: "ONE"
}
#two:before{
  content: "TWO"
}
div:focus{
  border-color: red;
}
span.active{
  color:red;
}

JavaScript

$(document).ready(function(){
    $('div').keydown(function(e) {
			e.preventDefault();
      if(!$(this).find('.active').length){
      	$($(this).find('span')[0]).addClass('active');
      }else{
      	$($(this).find('.active')[0]).next().next().next().addClass('active');
 $($('.active')[0]).removeClass('active');
      }
  });
});