Simple class based jaavascript filtering solution using data attributes

filter.js

$(".filters .filters__wrapper ul").on("click", "li", function () {

    // Set clicked element as active
    $(this).siblings().removeClass("active");
    $(this).toggleClass("active");

    // Get the class to filter by
    var filterClass = $(this).data("filter").trim();

    // Get the grid this filter applies to (use data-grid="#some-id-here")
    var gridIdentifier = $(this)
        .parent("ul")
        .data("grid");


    // Get grid items
    var items = $(gridIdentifier).children(".grid__item");

    // Show/Hide based on their class
    for (var i = 0; i < items.length; i++) {

        var item = $(items[i]);

        if (filterClass == "*" || filterClass == "") {
            item.fadeIn();
        } else if (!item.hasClass(filterClass)) {
            item.fadeOut(500);
        } else {
            item.fadeIn(500);
        }
    }
});