JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="nav-ul">
<li>
    <a id="1" href="" class="nav-link" id="link-home">1
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="2" href="" class="nav-link" id="link-home">2
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="3" href="" class="nav-link" id="link-home">3
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="4" href="" class="nav-link" id="link-home">4
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="5" href="" class="nav-link" id="link-home">5
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="6" href="" class="nav-link" id="link-home">6
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="7" href="" class="nav-link" id="link-home">7
        <img src="assets/home.png">
    </a>
</li>

CSS

a.active {
  background-color: #b2b2b2;
  outline: 1px solid red ;
}

a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

JavaScript

var target = 1;
downarrow();
function downarrow() {
  $(document).keydown(function(e){
    if (e.keyCode == 40) {
      alert(target);
      $('#' + target).addClass('active');
      $('#' + target).focus();
      $('a').not($('#' + target)).removeClass('active');
      target++;
    } 
    if (target === 8) {
     target = 1;
    };
  });

};