JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div id="filters">
    <div class="filterblock">
        <input id="check1" type="checkbox" name="check" value="cola" class="category">
        <label for="check1">Cola</label>
    </div>
    <div class="filterblock">
        <input id="check2" type="checkbox" name="check" value="fanta" class="category">
        <label for="check2">Fanta</label>
    </div>
    <div class="filterblock">
        <input id="check3" type="checkbox" name="check" value="sprite" class="category">
        <label for="check3">Sprite</label>
    </div>
</div>
<hr>
<div id="count">7</div>
<hr>
<div class="container" style="display:none;">
    <ul class="pagination"></ul>
</div>
<hr>
<div class="resultblock" data-tag="cola">one</div>
<div class="resultblock" data-tag="cola fanta">two</div>
<div class="resultblock" data-tag="cola fanta sprite">three</div>
<div class="resultblock" data-tag="fanta">four</div>
<div class="resultblock" data-tag="fanta sprite">five</div>
<div class="resultblock" data-tag="sprite">six</div>
<div class="resultblock" data-tag="sprite cola">seven</div>

JavaScript

function paginate() {
        $('.container').html('');
        var attrCount = $("#count").text();
        var perPage = 3;
        var pageCount = parseInt(attrCount / perPage);
        var lastPage = attrCount % perPage;
        if (attrCount > perPage) {
            if (lastPage > 0) {
                pageCount = pageCount + 1;
            }
            var i;
            for (i = 0; i < pageCount; ++i) {
                $('.container').append('<li><a href="#" class="pageButton">' + (i + 1) + '</a></li>');
            }
            $('.container').show();
            $('.resultblock:gt(' + (perPage - 1) + ')').hide();
            $("body").on("click", ".pageButton", function () {
               
                var m = $(this).text();
                $('.resultblock').show();
                $('.resultblock:lt(' + ((m - 1) * perPage) + ')').hide();
                $('.resultblock:gt(' + (m * perPage - 1) + ')').hide();
            });
        }
    }

    $('.category').on('change', function () {
        var n;
        var category_list = [];
        $('#filters :input:checked').each(function () {
            var category = $(this).val();
            category_list.push(category);
        });

        if (category_list.length == 0) {
            $('.resultblock').show();
            $('#count').text($('.resultblock').length);
        } else {
            $('.resultblock').hide();
            n = 0;
            $('.resultblock').each(function () {
                var self = this;
                var item = $(this).data('tag');
                var itemArray = item.split(' ');
                var i;
                for (i = 0; i < category_list.length; ++i) {
                    if (itemArray.indexOf(category_list[i]) >= 0 && !$(self).is(":visible")) {
                        $(self).show();
                        n++;
                    }
                }
            });
            $('#count').text(n);
        }
    });

    paginate();