JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="price">
    <li class="price_indiv">	<strong class="final_price">5</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">10</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">1</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">2</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">4</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">6</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">5</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">8</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">5</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">1</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">10</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">3</strong>

    </li>
    <li class="price_indiv">	<strong class="final_price">10</strong>

    </li>
</ul>
<input type='hidden' id='thisPage' />
<input type='hidden' id='onePageValue' />
<div id='priceLinks'></div>
<div class="sortc">
    <div id="sortings">
        <p> <a class="sortp" href="#">Sort by Price</a>

        </p>
    </div>
</div>

JavaScript

makePager = function (page) {
    var onePageValues = 5;
    var totalPrice = $('.price li').size();
    var pagesCount = Math.ceil(totalPrice / onePageValues);
    var ViewableLinks = 20;
    var getPages = '';
    var thisPage = page;
    var thisLink = (ViewableLinks >= thisPage ? 1 : ViewableLinks + 1);
    if (thisPage > 1) thisLink = thisPage;
    if (thisLink != 1) getPages += "<a class='next' href=\"javascript:first();\">« Start&nbsp;</a>&nbsp;<a class='next' href=\"javascript:previous();\">« Prev&nbsp;</a>&nbsp;";
    if (thisLink == pagesCount - 1) thisLink = thisLink - 3;
    else if (thisLink == pagesCount) thisLink = thisLink - 4;
    else if (thisLink > 2) thisLink = thisLink - 2;
    else thisLink = 1;
    var pages = ViewableLinks;
    while (pages !== 0) {
        if (pagesCount < thisLink) {
            break;
        }
        if (thisLink >= 1) getPages += "<a class='" + ((thisLink == thisPage) ? "currentPageButton" : "numericButton") + "' href=\"javascript:showPage(" + thisLink + ")\" longdesc='" + thisLink + "'>" + (thisLink) + "</a>&nbsp;";
        thisLink++;
        pages--;
    }
    if (pagesCount > thisPage) {
        getPages += "<a class='next' href=\"javascript:next()\">Next »</a>&nbsp;<a class='next' href=\"javascript:last(" + pagesCount + ");\">Last »</a>";
    }
    $('#priceLinks').html(getPages);
}
var pageSize = 5;
showPage = function (page) {
    $(".price li").hide();
    $('#thisPage').val(page);
    $(".price li").each(function (n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page) $(this).show();
    });
    makePager(page);
}
showPage(1);
next = function () {
    new_page = parseInt($('#thisPage').val()) + 1;
    showPage(new_page);
}
last = function (pagesCount) {
    new_page = pagesCount;
    $('#thisPage').val(new_page);
    showPage(new_page);
}
first = function () {
    var new_page = "1";
    $('#thisPage').val(new_page);
    showPage(new_page);
}
previous = function () {
    new_page =...