JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filter">
    <a href="#category-1">category 1</a>
    <a href="#category-2">category 2</a>
</div>

<div id="item-wrapper">
<ul class="items">
    <li class="category-1">item 1</li>
    <li class="category-1">item 2</li>
    <li class="category-1">item 3</li>
    <li class="category-1">item 4</li>
    <li class="category-1">item 5</li>
    <li class="category-1">item 6</li>
    <li class="category-2">item 7</li>
    <li class="category-2">item 8</li>
    <li class="category-2">item 9</li>
    <li class="category-2">item 10</li>
    <li class="category-2">item 11</li>
    <li class="category-2">item 12</li>
    <li class="category-1">item 13</li>
    <li class="category-1">item 14</li>
    <li class="category-2">item 15</li>
</ul>

<div class="ctrl-nav">
<a href="#" id="prev">Previous</a><a href="#" id="next">Next</a>
</div>
</div>

CSS

#item-wrapper {
 width:250px;   
 margin:30px 0 0 30px;
}
.items li {
 font-family:arial;
font-size:13px;
 background-color:#ccc;
margin-bottom:1px; 
padding:5px;    
}
.ctrl-nav {
    background-color:#999;
    padding:5px;
    overflow:hidden;
}
.ctrl-nav a {
    font-family:arial;
font-size:13px;
    padding:5px 10px;
    color:#fff;
}
.ctrl-nav a#prev{
 float:left;   
}
.ctrl-nav a#next{
 float:right;   
}

JavaScript

var visible = "";

$('div.filter').delegate('a', 'click', function (event) {
  visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
    //$('ul.items li').hide().filter(visible).show();
    pagination();
  event.preventDefault();
});


var itemsNumber = 6;
var min = 0;
var max = itemsNumber;

function pagination(action) {

    var totalItems = $("li" + visible).length;
    
    if (max < totalItems) {//Stop action if max reaches more than total items 
        if (action == "next") {

            min = min + itemsNumber;
            max = max + itemsNumber;

        }
    }

    if (min > 0) {//Stop action if min reaches less than 0
        if (action == "prev") {

            min = min - itemsNumber;
            max = max - itemsNumber;

        }
    }

    $("li").hide();
    $("li" + visible).slice(min, max).show();

}

pagination();


//Next
$("#next").click(function() {

    action = "next";
    pagination(action);

})

//Previous
$("#prev").click(function() {
    action = "prev";
    pagination(action);

})