Multiple categories filtering with dropdowns

Hi, I'm banging my head against a wall on an issue here, and I just cannot figure it out. I have a page with multiple dropdowns, each connected to multiple categories. What I want it to do is use these multiple dropdowns to filter a list of items. The problem is that when I choose something from the first dropdown and then from the second, the second dropdown overrides whatever I selected with the first. As I understood it from examples, it would be possible to avoid this by using requireAll: true, but I am starting to suspect that I misunderstood the functionality of it.

Is there any way of accomplishing what I want with your plugin?

I should also mention I am quite new to all of this, so I might have overlooked something completely obvious.

My js is as follows:

$(function() {

    var ex8 = $('.filter').instaFilta({

        scope: '#ex8',
        targets: '.instafilta-target',
        requireAll: true

    });
   $('#role').on('change', function() {

        ex8.filterCategory($(this).val()) 

    });

    role.filterCategory('Offense');
    role.filterCategory('Defense');

   $('#element').on('change', function() {

        ex8.filterCategory($(this).val()) 

    });

    element.filterCategory('Physical');
    element.filterCategory('Arcane');
    element.filterCategory('Fire');
    element.filterCategory('Frost');
    element.filterCategory('Lightning');

});

The select:

<div class="example" id="ex8">
<fieldset class="filters">
                        <input type="text" id="ex8f" placeholder="Type here to filter">
                        <select class="filter" id="role" name="role">
                            <option value="">Role</option>
                            <option value="Offense">Offense</option>
                            <option value="Defense">Defense</option>

                        </select>

                        <select class="filter" id="element">
                            <option value="">Element</option>
                            <option value="Physical">Physical</option>
                            <option value="Arcane">Arcane</option>
                            <option value="Fire">Fire</option>
                            <option value="Frost">Frost</option>
                            <option value="Lightning">Lightning</option>
                        </select>

                    </fieldset>

<span class="instafilta-target" data-instafilta-category="<?php echo $role . "," . $element ?>"><?php echo $img ?></span>
</div>

EDIT: With above example, with the filterCategory('') added, filtering doesn't actually work, so I'm back to

$(function() {

    var ex8 = $('.filter').instaFilta({

        scope: '#ex8',
        targets: '.instafilta-target',
        requireAll: true

    });

   $('#role').on('change', function() {     
        ex8.filterCategory($(this).val()) 

    });
   $('#element').on('change', function() {
        ex8.filterCategory($(this).val()) 

    });
});

chromawoods / instaFilta

Multiple categories filtering with dropdowns #10