JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panelp panelp-info" style="direction:rtl; text-align:right;">
  <div class="panelp-heading">
    My Links
  </div>
  <div class="panel-body">
    <ul id = "MypLinkbox" class="paging">
      <li style="display: none;"><a href="http://site1.com" rel="nofollow">Description1</a></li>
      <li style="display: none;"><a href="http://site2.com" rel="nofollow">Description2</a></li>
      <li style="display: none;"><a href="http://site3.com" rel="nofollow">Description3</a></li>
      <li style="display: none;"><a href="http://site4.com" rel="nofollow">Description4</a></li>
      <li style="display: none;"><a href="http://site5.com" rel="nofollow">Description5</a></li>
      <li style="display: none;"><a href="http://site6.com" rel="nofollow">Description6</a></li>
      <li style="display: none;"><a href="http://site7.com" rel="nofollow">Description7</a></li>
      <li style="display: none;"><a href="http://site100.com" rel="nofollow">Description100</a></li>
    </ul>
    <ul class="pager">
      <li><a href="javascript:prevPage()" id="btn_prev">Previous</a></li>
      <li><a href="javascript:nextPage()" id="btn_next">Next</a></li>
    </ul>
  </div>
</div>

CSS

.pager,.simplePagerNav{text-align:center;list-style:none}.paging a,.simplePagerNav a{text-decoration:none;color:#000}.paging a:hover{text-decoration:none;color:#00f}.panelp{margin-bottom:20px;background-color:#fff;border:1px solid transparent;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}.panelp-body{padding:5px}.panelp-heading{padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}.panelp-footer{padding:10px 15px;background-color:#f5f5f5;border-top:1px solid #ddd;border-bottom-right-radius:3px;border-bottom-left-radius:3px}.panelp-default{border-color:#ddd}.panelp-default>.panelp-heading{color:#333;background-color:#f5f5f5;border-color:#ddd}.panelp-default>.panelp-heading+.panelp-collapse>.panelp-body{border-top-color:#ddd}.panelp-default>.panelp-heading .badge{color:#f5f5f5;background-color:#333}.panelp-default>.panelp-footer+.panelp-collapse>.panelp-body{border-bottom-color:#ddd}.panelp-primary{border-color:#337ab7}.panelp-primary>.panelp-heading{color:#fff;background-color:#337ab7;border-color:#337ab7}.panelp-primary>.panelp-heading+.panelp-collapse>.panelp-body{border-top-color:#337ab7}.panelp-primary>.panelp-heading .badge{color:#337ab7;background-color:#fff}.panelp-primary>.panelp-footer+.panelp-collapse>.panelp-body{border-bottom-color:#337ab7}.panelp-success{border-color:#d6e9c6}.panelp-success>.panelp-heading{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.panelp-success>.panelp-heading+.panelp-collapse>.panelp-body{border-top-color:#d6e9c6}.panelp-success>.panelp-heading...

JavaScript

var current_page = 1;
var records_per_page = 5;
var items = document.querySelectorAll("#MypLinkbox li");
 
function prevPage() {
    if (current_page > 1) {
        current_page--;
        changePage(current_page);
    }
}

function nextPage() {
    if (current_page < numPages()) {
        current_page++; 
        changePage(current_page);
    }
}
    
function changePage(page) {
    var btn_next = document.getElementById("btn_next");
    var btn_prev = document.getElementById("btn_prev");
    
    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

		// hide all
		for (var i = 0; i < items.length; i++){
    	 items[i].style.display = "none";
    }
    
    for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < items.length; i++) {
       items[i].style.display = "block";
    }

    if (page == 1) {
        btn_prev.style.visibility = "hidden";
    } else {
        btn_prev.style.visibility = "visible";
    }
	  if (page == numPages()) {
		    btn_next.style.visibility = "hidden";
	  } else {
		    btn_next.style.visibility = "visible";
	  }
}

function numPages() {
    return Math.ceil(items.length / records_per_page);
}

window.onload = function() {
    changePage(1);
};