JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<p><a href="#" id="alert_next">Next</a></p>
<p><a href="#">Im Verband freigeben</a></p>
<p><a href="#">Vorheriger Einsatz</a></p>

<p>
  click the right arrow, up, or down.
</p>

JavaScript

//setting id for first button (works)
$("a:contains('Im Verband freigeben')").attr('id', 'freigabe-verband');
//setting id for second button (works aswell)
$("a:contains('Vorheriger Einsatz')").attr('id', 'vorheriger-einsatz');

function genericEvent(move) {
  alert('event fired ' + move)
}

$(document).keydown(function(e) {
  if (e.keyCode == 39) {
    //works, id is available, not set by me
    $("#alert_next").click(genericEvent('right alert #alert_next')).click();

  } else if (e.keyCode == 38) {
    // doesn't work, but id is set
    $("#freigabe-verband").click(genericEvent('up #freigabe-verband')).click();

  } else if (e.keyCode == 40) {
    // doesn't work, but id is set
    $("#vorheriger-einsatz").click(genericEvent('down #vorheriger-einsatz')).click();

  }
  return e.returnValue;

});