JSFiddle - React, Tailwind, and code Playground

HTML

<label>Limit:</label>
<input type="text" id="limit" value="4"/>
<button id="prev">Prev</button>
<button id="next">Next</button>

<div class="channel_container"></div>

CSS

.channel_container {
    border:1px solid #666;
    padding:8px;
}
.channel_block {
    border:1px solid #4444dd;
    width:30px;
    height:30px;
    text-align:Center;
    line-height:30px;
    margin-bottom:4px;
    background:#7777ff;
    color:#fff;
}
.channel_hidden {
    display:none;
}

JavaScript

var T = {}

T.init = function() {
    T.current = 0;
    T.limit = T.getLimit();
    T.items = 300;
    T.buildItems(T.items);
    T.showSet(T.current);
    
    // Bind some actions
    $("body").on("click","#next",function() {
        var next = T.current + T.limit;
        next = (next >= T.items) ? T.items - T.limit : next;
        T.current = next;
        T.showSet(T.current);
    });
    
    $("body").on("click","#prev",function() {
        var prev = T.current - T.limit;
        prev = (prev < 0) ? 0 : prev;
        T.current = prev;
        T.showSet(T.current);
    });
    
    $("body").on("change","#limit",function() {
        T.limit = T.getLimit();
        T.showSet(T.current);
    });
}

T.getLimit = function() {
     return parseInt($("#limit").val());   
}

T.showSet = function(start) {
    var limit = T.limit;
    
    $channels = $(".channel_block").slice(start, start+limit);
    
    $(".channel_block").addClass("channel_hidden");
    
    $channels.each(function(index, element) {
        $(element).removeClass('channel_hidden');
    });
}

T.buildItems = function(num) {
    
    for(var i = 0; i < num; i++) {
        $(".channel_container").append("<div class='channel_block'>"+i+"</div>");   
    }
}

T.init();