How i can get isotope filtering url hash with AJAX/PHP?

sorry for my english but i will try my best to ask my question correctly.

As layout i'm using this = https://codepen.io/Sool/pen/vvodgj with minor changes to support url hash.

Isotope JS Code:

$(document).ready(function($) {
    var $grid = $('.grid').isotope({
        // options
        itemSelector: '.grid-item',
        layoutMode: 'fitRows',

    });
    var filterFns = {
        // show if number is greater than 50
        numberGreaterThan50: function() {
            var number = $(this).find('.number').text();
            return parseInt(number, 10) > 50;
        },
        // show if name ends with -ium
        ium: function() {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };

    function getHashFilter() {
        // get filter=filterName
        var matches = location.hash.match(/filter=([^&]+)/i);
        var hashFilter = matches && matches[1];
        return hashFilter && decodeURIComponent(hashFilter);
    }


    // change is-checked class on buttons
    var $buttonGroup = $('.filters');
    $buttonGroup.on('click', 'li', function(event) {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        var $button = $(event.currentTarget);
        $button.addClass('is-checked');
        var filterValue = $button.attr('data-filter');
        // set filter in hash
        location.hash = 'filter=' + encodeURIComponent(filterValue);
        $grid.isotope({ filter: filterValue });
    });

    var isIsotopeInit = false;

    function onHashchange() {
        var hashFilter = getHashFilter();
        if (!hashFilter && isIsotopeInit) {
            return;
        }
        isIsotopeInit = true;
        // filter isotope
        $grid.isotope({
            itemSelector: '.element-item',
            layoutMode: 'fitRows',
            // use filterFns
            filter: filterFns[hashFilter] || hashFilter
        });
        // set selected class on button
        if (hashFilter) {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $buttonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked');
        }
    }

    $(window).on('hashchange', onHashchange);

    // trigger event handler to init Isotope
    onHashchange();
})

AJAX Code:

$(document).ready(function() {

var limit = 7;
var start = 4;
var action = 'inactive';

function load_country_data(limit, start) {
    $.ajax({
        url: "fetch.php",
        method: "POST",
        data: { limit: limit, start: start },
        cache: false,
        success: function(data) {
            $('#load_data').append(data);
            if (data == '') {
                $('#load_data_message').html("<button type='button'>All images loaded</button>");
                action = 'active';
            } else {
                $('#load_data_message').html("<button type='button'>Loading images.....</button>");
                action = "inactive";
            }
        }
    });
}

if (action == 'inactive') {
    action = 'active';
    load_country_data(limit, start);
}
$(window).scroll(function() {
    if ($(window).scrollTop() + $(document).height() > $("#load_data").height() && action == 'inactive') {
        action = 'active';
        start = start + limit;
        setTimeout(function() {
            load_country_data(limit, start);
        }, 1000);
    }
});

});

PHP Code to fetch data:

<?php
if(isset($_POST["limit"], $_POST["start"]))
{
 include "mysqli_connection.php";
 $query = "SELECT * FROM gallery ORDER BY order ASC LIMIT ".$_POST["start"].", ".$_POST["limit"]."";
 $result = mysqli_query($conn, $query);
 while ($row = mysqli_fetch_array($result)) {
?>                                                      
        <div class="col-md-3 grid-item <?= htmlspecialchars($row["category"]) ?>" data-category="<?= htmlspecialchars($row["category"]) ?>">
            <img data-src="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" data-srcset="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" class="img-fluid" alt="<?= htmlspecialchars($row["title"]) ?> Image" srcset="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" src="<?= htmlspecialchars($row["image"]) ?>">
        </div>

  <?php
    }
    mysqli_close($conn);
}
    ?>

The data is loaded from the database and everything seems to be fine. But at the same time, filtering stops working. How to make filtering work with ajax?

How to make sure that when you click on a certain category, data from a certain category is loaded? With ajax and working url hash, something like that domain.com/#filter=category1 or domain.com/#filter=category3.

I would be very grateful for any advice or help on this issue, thank you.