Cacher is the code snippet organizer for pro developers

.vertical-menu {
    width: 200px;
    height: 250px;
    overflow-y: auto;
}

.vertical-menu a {
    background-color: #eee; /* Grey background color */
    color: black; /* Black text color */
    display: block; /* Make the links appear below each other */
    padding: 12px; /* Add some padding */
    text-decoration: none; /* Remove underline from links */
}

.vertical-menu a:hover {
    background-color: #ccc; /* Dark grey background on mouse-over */
}

.vertical-menu a.active {
    background-color: #4CAF50; /* Add a green color to the "active/current" link */
    color: white;
}


.btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 18px;
    height: 100px;
    width: 100px;
}

/* Style the active class, and buttons on mouse-over */
.active, .btn:hover {
    background-color: #060;
    color: white;
}

// // Import stylesheets
import './style.css';

// // Write Javascript code!
// const appDiv = document.getElementById('app');
// appDiv.innerHTML = `<h1>JS Starter</h1>`;

// $(document).ready(function(){
//   $('ul li a').click(function(){
//     $('li a').removeClass("active");
//     $(this).addClass("active");
// });
// });

$(document).ready(function () {
  $(window).keydown(function (e) {
    // var current = document.getElementsByClassName("active");
    // var m1 = document.getElementById("b1");
    // $('#b2').removeClass("active");
    $('[id^=m-]').removeClass("active");
    $('[id^=b-]').removeClass("active");
    
    // console.log(current)
    // console.log(event.keyCode);

    switch (e.which) {
      //
      case 37: //left arrow key
      $('#b-left').addClass("active");
        break;

      case 38: //up arrow key
      // $('#b-up').addClass("active");
        break;

      case 39: //right arrow key
      $('#b-right').addClass("active");
        break;

      case 40: //bottom arrow key
      // $('#b-down').addClass("active");
      $('#m-2').addClass("active");
        break;
    }
  });
});

var header = document.getElementById("menus");
var btns = header.getElementsByClassName("men");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function () {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

<div class="vertical-menu" id="menus">
  <a href="#" id="m-1" class="men active">Link 1</a>
  <a href="#" id="m-2" class="men">Link 2</a>
  <a href="#" id="m-3" class="men">Link 3</a>
  <a href="#" id="m-4" class="men">Link 4</a>
  <a href="#" id="m-5" class="men">Link 5</a>
</div>

<div id="myDIV">
  <table>
  <tr><td></td><td><button id="b-up" class="btn">UP</button></td><td></td></tr>
  <tr><td><button id="b-left" class="btn">LEFT</button></td><td></td><td><button id="b-right" class="btn">RIGHT</button></td></tr>
  <tr><td></td><td><button id="b-down" class="btn">DOWN</button></td><td></td></tr>
</table>  
</div>