JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"><div>111</div></a>
<a href="#"><div>222</div></a>
<a href="#"><div>333</div></a>
<a href="#"><div>444</div></a>
<a href="#"><div>555</div></a>
<a href="#"><div>666</div></a>

<span id="loopVal">Loop: 1</span>

JavaScript

var loop = 1;
var $hlight;
var $div = $('a');

$hlight = $('a').first();
$hlight.css('color','yellow');

$(document).keydown(function(e) {   
    if (e.keyCode == 40)
    {      
      loop++;
      
      if(loop == $('a').size())
      {
         $hlight.css('color','');
         $hlight = $('a').last();
         $hlight.css('color','yellow');
         loop = $('a').size();
      }
      else if(loop > $('a').size())
      {
          $hlight.css('color','');
          $hlight = $('a').first();
          $hlight.css('color','yellow');
          loop = 1;
      }
      else
      {
          $hlight.css('color','').next().css('color','yellow');
          $hlight = $('a').eq(loop-1);
      }        
   } 

   else if (e.keyCode == 38)
   {
                
    loop--;
   
    if(loop == 1)
    {
        $hlight.css('color','');
        $hlight = $('a').first();
        $hlight.css('color','yellow');
    }       
    else if(loop <= 0)      
    {
        $hlight.css('color','');
        $hlight = $('a').last();
        $hlight.css('color','yellow');
        loop = $('a').size();
    }
    else
    {
        $hlight.css('color','').prev().css('color','yellow');
        $hlight = $('a').eq(loop-1);
        
    }
       
    } 

        document.getElementById("loopVal").innerText = "Loop: " + loop;
        
    })