Pagination with jquery for custom html

I have a problem while creating the pagination for my custom html in WordPress. I need to create a custom card for each category item and sort them into alphabetical. But I can't find a plugin or some features for creating it. So, I decided to create my own custom html.

The code for pagination that I try didn't work for some reason. Only the sort code works. I need to use the vanilla script for the pagination. And the result that I want is category items are sort into alphabetical and it shows 5 item per page.

<div class="flowercontainer">
        <div class="flowercard">
            <a href="#" target="_blank" rel="noopener"><div class="card-image rose"></div></a>
            <div class="flowername"><a href="#" target="_blank" rel="noopener">ROSE</a></div>
        </div>
                <div class="flowercard">
            <a href="#" target="_blank" rel="noopener"><div class="card-image jasmine"></div></a>
            <div class="flowername"><a href="#" target="_blank" rel="noopener">JASMINE</a></div>
        </div>
                <div class="flowercard">
            <a href="#" target="_blank" rel="noopener"><div class="card-image orchid"></div></a>
            <div class="flowername"><a href="#" target="_blank" rel="noopener">ORCHID</a></div>
        </div>


<div class="pagination">
    <li class="page-item previous-page disable"><a class="page-link" href="#">Prev</a></li>
    <li class="page-item current-page active"><a class="page-link" href="#">1</a></li>
    <li class="page-item dots"><a class="page-link" href="#">...</a></li>
    <li class开发者_C百科="page-item current-page"><a class="page-link" href="#">5</a></li>
    <li class="page-item current-page"><a class="page-link" href="#">6</a></li>
    <li class="page-item dots"><a class="page-link" href="#">...</a></li>
    <li class="page-item current-page"><a class="page-link" href="#">10</a></li>
    <li class="page-item next-page"><a class="page-link" href="#">Next</a></li>
  </div>
<style>
{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
.flowercontainer {
    display: flex;
    justify-content: center;
        padding: 15px;
    flex-wrap: wrap;
}
.flowercard {
    background: white;
    width: 220px;
    height: 400px;
    margin: 12px;
    border-radius: 15px;
        outline: #8224e3 solid 5px;
}
.card-image {
    background-color: purple;
    height: 300px;
    margin-bottom: 15px;
    background-size: cover;
    border-radius: 15px 15px 0 0;
}

.flowername {
    padding: 0px;
    color: purple;
    display: inline-flex;
    text-align: center;
        font-size: 20px;
}

.rose {
    background-image: url(rose.jpg);
}
.jasmine {
    background-image: url(jasmine.jpg);
}
.orchid {
    background-image: url(orchid.jpg);
}
</style>
<script src="https://cdnjs.cloudflare.com/h5jax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
<script>
    function getPageList(totalPages, page, maxLength){
        function range(start, end){
            return Array.from(Array(end - start + 1), (_, i) => i + start);
        }

        var sideWidth = maxLength < 9 ? 1 : 2 ;
        var leftWidth = (maxLength - sideWidth * 2 - 3) >> 1;
        var rightWidth = (maxLength - sideWidth * 2 - 3) >> 1;

        if (totalPages <= maxLength){
            return range(1, totalPages);
        }

        if (page <= maxLength - sideWidth - 1 - rightWidth){
            return range(1, maxLength - sideWidth - 1).concat(0, range(totalPages - sideWidth + 1, totalPages));
        }

        if (page >= totalPages - sideWidth -1 - rightWidth){
            return range(1, sideWidth).concat(0, range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
        }

        return range(1, sideWidth).concat(0, range(page - leftWidth, page + rightWidth), 0, range(totalPages - sideWidth + 1, totalPages));
    }

    $(function(){
        var numberOfItems = $(".flowercontainer .flowercard").length;
        var limitPerPage = 3;
        var totalPages = Math.ceil(numberOfItems / limitPerPage);
        var paginationSize = 4;
        var currentPage;

        function showPage(whichPage){
            if (whichPage < 1 || whichPage > totalPages) return false;

            currentPage = whichPage;

            $(".flowercard").hide().slice((currentPage - 1) * limitPerPage, currentPage * limitPerPage).show();

            $(".pagination li").slice(1, -1).remove();

            getPageList(totalPages, currentPage, paginationSize).forEach(item => {
                $("<li>").addClass("page-item").addClass(item ? "current-page" : "dots")
                .toggleClass("active", item === currentPage).append($("<a>").addClass("page-link")
                    .attr({href: "javascript:void(0)"}).text(item || "...")).insertBefore(".next-page");
            });

            $(".previous-page").toggleClass("disable", currentPage === 1);
            $(".next-page").toggleClass("disable", currentPage === totalPages);
            return true;
        }

        $(".pagination").append(
            $("<li>").addClass("page-item").addClass("previous-page").append($("<a>").addClass("page-link").attr({href: "javascript:void(0)"}).text("Prev")),
            $("<li>").addClass("page-item").addClass("next-page").append($("<a>").addClass("page-link").attr({href: "javascript:void(0)"}).text("Next"))
            );

        $(".flowercard").show();
        showPage(1);

        $(document).on("click", ".pagination li.current-page:not(.active)", function(){
            return showPage(+$(this).text());
        }); 
    });
</script>
<script>
    const container = document.querySelector(".flowercontainer");
const key = (a) => a.querySelector(".flowername").textContent.trim();

Array.from(container.children)
     .sort((a, b) => key(a).localeCompare(key(b)))
     .forEach(child => container.appendChild(child));
</script>