How to filter elements based on two seperate filters using jQuery

I have a blog where I have built a custom dropdown filter, and I have it working with one dropdown as you will see here:

https://codepen.io/Canvasandcode/pen/zYYqQNx

Here is a preview of the jQuery code:

var filterActive;

function filterCategory(category) {
    if (filterActive != category) {

        // reset results list
        $('.filter-cat-results .f-cat').removeClass('active');

        // elements to be filtered
        $('.filter-cat-results .f-cat')
            .filter('[data-cat="' + category + '"]')
            .addClass('active');

        // reset active filter
        filterActive = category;
    }
}

$('.f-cat').addClass('active');

$('.filtering select').change(function() {
    if ($(this).val() == 'cat-all') {
        $('.filter-cat-results .f-cat').addClass('active');
        filterActive = 'cat-all';
    } else {
        filterCategory($(this).val());
    }
});

However I need help with getting this to work when using two filters at the same time. The first filter (brands filter) displays a specific brand. The second filter would filter based on categories such as photography, video etc.

Both filters should work independant of eachother also. So if the first filter is untouched then the second filter (if selecting photography) will show photography for every brand. And if a user then selects a brand after this point, then it will only show photography for that brand.