JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="paginationGenerate(1)">Generate Pagination</button>

JavaScript

function paginationGenerate(page) {
    var pageCount = 10;
    var pagination = "<ul class=\"pagination\"><li><a href=\"#\" onclick=\"paginationGenerate(checkPrevious(" + page + ")) \">&laquo;</a></li>";

    /* Page Range Calculation */
    var range = pageRange(page, pageCount);
    var start = range.start;
    var end = range.end;

    for (var page_id = start; page_id <= end; page_id++) {
        if (page_id != page) pagination += "<li><a href=\"#\" onclick=\"paginationGenerate(" + page_id + ")\">" + page_id + "</a></li>";
        else pagination += "<li class='active'><span>" + page_id + "</span></li>";
    }
    pagination += "<li><a href=\"#\" onclick=\"paginationGenerate(checkNext(" + page + "," + pageCount + "))\">&raquo;</a></li></ul>";

    /* Appending Pagination */
    $('.pagination').remove();
    $('body').append(pagination);
}

/* Pagination Navigation */
function checkPrevious(id) {
    if (id > 1) {
        return (id - 1);
    }
    return 1;
}

/* Pagination Navigation */
function checkNext(id, pageCount) {
    if (id < pageCount) {
        return (id + 1);
    }
    return id;
}

/* Page Range calculation Method for Pagination */
function pageRange(page, pageCount) {

    var start = page - 2,
        end = page + 2;

    if (end > pageCount) {
        start -= (end - pageCount);
        end = pageCount;
    }
    if (start <= 0) {
        end += ((start - 1) * (-1));
        start = 1;
    }

    end = end > pageCount ? pageCount : end;

    return {
        start: start,
        end: end
    };
}

function pageNo() {
    console.log("Hello");
}