JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="snippet-categories"></ul>

<div id="prev">prev</div>
<div id="next">next</div>

CSS

.focus{
    background:red;    
}

JavaScript

var curPos = 0;					// index for selected element
var itemVisible = 4;        	// number of items visible
var minIndex = 0;				// define visible area start
var maxIndex = itemVisible-1;	// define visible area end
var outItems = 0;				// number of element out of visible area
var range = ['0-a','1-b','2-c','3-d','4-e','5-f','6-g','7-h','8-i','9-l'];

var removeFocus = function(){
	$('li.focus').removeClass('focus');
}
var focus = function(){
	$('ul > li:eq('+curPos+')').addClass('focus');	
}
var renderItems = function(){
    var html = '<ul>';
    for(var i = 0; i < itemVisible; i++) {
	    html += '<li>' + range[i+outItems] + '</li>'
    }	
    html += '</ul>';
    $('.snippet-categories').html(html);
}

// first time render and focus
renderItems();
focus();

$('#next').click(function(){
	debugger
    if(curPos < maxIndex)
    {
        removeFocus();
        if(curPos < maxIndex)
            curPos++;
        else
        {
            outItems++;
        }
    } else {			
       if(outItems < range.length - itemVisible)
           outItems++;
    }
    renderItems();
    focus();
});

$('#prev').click(function(){
    if(curPos > minIndex)
    {
        removeFocus();
        if(curPos > minIndex)
            curPos--;
        else
        {
            outItems--;
        }
    } else {
        if(outItems > 0)
            outItems--;
    }
		renderItems();
		focus();
});