Isotope combination filters

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="nav">
    <ul class="filter option-set" data-filter-group="who">
        <li><b>Who?</b></li>
        <li><a href="#filter-who-any" data-filter-value="" class="selected">Any</a></li>
        <li><a href="#filter-who-boys" data-filter-value=".boys">Boys</a></li>
        <li><a href="#filter-who-girls" data-filter-value=".girls">Girls</a></li>
        <li><a href="#filter-who-families" data-filter-value=".families">Families</a></li>
    </ul>
    
    <ul class="filter option-set" data-filter-group="what">
        <li><b>What?</b></li>
        <li><a href="#filter-what-any" data-filter-value="" class="selected">Any</a></li>
        <li><a href="#filter-what-workshop" data-filter-value=".workshop">Workshop</a></li>
        <li><a href="#filter-what-theatre" data-filter-value=".theatre">Theatre</a></li>
        <li><a href="#filter-what-concert" data-filter-value=".concert">Concert</a></li>
        <li><a href="#filter-what-trip" data-filter-value=".trip">Trip</a></li>
    </ul>
    
    <ul class="filter option-set" data-filter-group="why">
        <li><b>Why?</b></li>
        <li><a href="#filter-why-any" data-filter-value="" class="selected">Any</a></li>
        <li><a href="#filter-why-entertainment" data-filter-value=".entertainment">Entertainment</a></li>
        <li><a href="#filter-why-education" data-filter-value=".education">Education</a></li>
        <li><a href="#filter-why-socialize" data-filter-value=".socialize">To socialize</a></li>
    </ul>
    
</div>
<!-- ITEMS -->
<div id="container">
    <div class="item boys girls families education workshop">
         <h3>Book Slam</h3>

        <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
    </div>
    <div class="item boys families socialize trip">
        ...

JavaScript

$(function () {
    var $container = $('#container'),
        filters = {};
    $container.isotope({
        itemSelector: '.item',
        filter: '',
    });

    // filter links
    $('.filter a').click(function () {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return;
        }

        var $optionSet = $this.parents('.option-set');
        // change selected class
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        // store filter value in object
        // i.e. filters.color = 'red'
        var group = $optionSet.attr('data-filter-group');
        filters[group] = $this.attr('data-filter-value');

        // convert object into array
        var isoFilters = [];
        for (var prop in filters) {
            isoFilters.push(filters[prop])
        }
        var selector = isoFilters.join('');
        $container.isotope({
            filter: selector
        });
        return false;
    });
});