Keyboard navigation on CMS collection items

Hey there :wave:t4: I was wondering if anyone could help me figure something out… I have a CMS collection list on a page, and I am trying to add keyboard navigation to the list. Essentially, I want the up and down arrow keys to hover/focus the previous/next cms item, and the enter key to open the link. I found some code examples online but I can’t get any to work.

This is the custom code I found/am using and the jsfiddle of it

<script>
	var journalListItem = $('journal-list-item');
  var journalListItemSelected;
  $(window).keydown(function(e){
    if(e.which === 40){
        if(journalListItemSelected){
           journalListItemSelected.removeClass('selected');
            next = journalListItemSelected.next();
            if(next.length > 0){
                journalListItemSelected = next.addClass('selected');
            }else{
                journalListItemSelected = journalListItem.eq(0).addClass('selected');
            }
        }else{
            journalListItemSelected = journalListItem.eq(0).addClass('selected');
        }
    }else if(e.which === 38){
        if(journalListItemSelected){
            journalListItemSelected.removeClass('selected');
            next = journalListItemSelected.prev();
            if(next.length > 0){
                journalListItemSelected = next.addClass('selected');
            }else{
                journalListItemSelected = journalListItem.last().addClass('selected');
            }
        }else{
            journalListItemSelected = journalListItem.last().addClass('selected');
        }
    }
	});

	e.preventDefault();
</script>

Here is my site Read-Only: LINK. Specifically, I am trying to make this work on the “Journal” page.