Filter products by multiple tags without refreshing the page using checkboxes

ajax-checkbox-filter.js

function filterProductsByTag(){
    var tagList = [];
    var tagUrl = '';
var initialURL = '';
$('.tagFilterBox').each( function(){
    var tagName = $(this).data('tag');
    if ($(this).is(':checked')){
    tagList.push(tagName);
}
});
tagUrl = "/" + tagList.join('+');

        var popped = ('state' in window.history && window.history.state !== null),
         initialURL = location.href;

        //function to handle the scenarios where back and forward buttons used in browser
        $(window).on("popstate", function (e) {
            // Ignore inital popstate that some browsers fire on page load
            var initialPop = !popped && location.href == initialURL;
            popped = true;
            if (initialPop) {
                return;
            }
            //ajaxLoadPage('/collections/' + window.collectionURL + tagUrl);
        });

        //the ajax function that does the AJAX calls to get the products and load them into the grid
        var ajaxLoadPage = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
               beforeSend: function(){
		$('.product-list').html('<div class="loading-feedback"><img src="#"></div>')
 },

                data: {},
                dataType: "html",
               success: function (data) {
                   var returnProd = $(data).find('.product-list');

                    $('.product-list').html(returnProd);
                    history.pushState({
                        page: url
                    }, url, url);
                }
            });
        };
            ajaxLoadPage('/collections/' + window.collectionURL + tagUrl);


}
$('.tagFilterBox').on('click', function(){
   
       filterProductsByTag();

 });