JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<li><a href="http://getbootstrap.com" target="_blank" class="cv_item"> link 1</a> </li>
<li><a href="http://google.com" target="_blank" class="cv_item"> link 2</a> </li>
<li><a href="http://facebook.com" target="_blank" class="cv_item"> link 3</a> </li>
<li><a href="http://bbc.com" target="_blank" class="cv_item"> link 4</a> </li>
<li><a href="http://news.com" target="_blank" class="cv_item"> link 5</a> </li>

CSS

a.active-link {
    color: #0f0;
}

JavaScript

$currentLi = $('.cv_item').last().closest('li');

$('body').on("keyup", function(e) {              
  	var code = e.which;
    
    if (code == 40) {
    	e.preventDefault();    
      // down here
      $currentLi = $currentLi.next();
      if ( $currentLi.length==0 )
      	$currentLi = $('.cv_item').first().closest('li'); 
        
      $('.cv_item').removeClass('active-link');
      
      $link = $currentLi.find('.cv_item');
      $link.addClass('active-link');      
      $link[0].click();
      
		} else if (code == 38) {
    	e.preventDefault();    
      // up here
      $currentLi = $currentLi.prev();
      if ( $currentLi.length==0 )
      	$currentLi = $('.cv_item').last().closest('li');
        
      $('.cv_item').removeClass('active-link');
      
      $link = $currentLi.find('.cv_item');
      $link.addClass('active-link');      
      $link[0].click();
      
	}
});