JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
    <span class="page-number">1</span>
    <span class="page-number">2</span>
    <span class="page-number">3</span>
    <span class="page-number">4</span>
    <span class="page-number active-page">5</span>
    <span class="page-number">6</span>
    <span class="page-number">7</span>
    <span class="page-number">8</span>
    <span class="page-number">9</span>
    <span class="page-number">10</span>
    <span class="page-number">11</span>
    <span class="page-number">12</span>
</div>

CSS

.navigation {
    text-align: center;
}
.active-page {
    text-decoration: underline;
    color: blue;
}
.page-number {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    height: 18px;
    margin: 0 3px;
}
.navigation-button {
    display: inline-block;
    vertical-align: middle;
    padding: 2px 10px;
    cursor: pointer;
    background-size: cover;
}

JavaScript

var position = false;
showPages();
function showPages() {
		var shownPages = 4;
    $('.next').remove();
    $('.previous').remove();
    $('.page-number').show();
    var pages = $('.navigation > .page-number').length;
    if (pages > shownPages) {
        $('.page-number').each(function () {
            if ($(this).hasClass('active-page')) {
                activePage = $(this).html();
            }
        });
        var previous = $('<span class="navigation-button previous">пред..</span>');
        var next = $('<span class="navigation-button next">след.</span>');
        if (!position) {
            position = Math.ceil(parseInt(activePage)/shownPages);
        }
         console.log(position);
        var lastPosition = Math.ceil(parseInt(pages)/shownPages);
        if (position > 1 && position < lastPosition) {
            $('.navigation').prepend(previous).append(next);
        } else if (position == 1) {
            $('.navigation').append(next);
        } else {
            $('.navigation').prepend(previous);
        }
        var visiblePages = [];
        for (var i = shownPages; i > 0; i--) {
            visiblePages[shownPages-i] = position * shownPages - i + 1;
        }
        $('.page-number').each(function () {
            if (!(visiblePages.indexOf(parseInt($(this).html())) != -1)) {
                $(this).hide();
            }
        });
    }
}
$('body').on('click', '.next', function () {
        position++;
        showPages();
    });
$('body').on('click', '.previous', function () {
        position--;
        showPages();
    });