Jquery - image filter with multiple categories
<p>I'm trying to add an image filter to a photo gallery and I'm having trouble getting it to work when one photo has multiple categories. The code below works when a phone only has 1 category (e.g. UX). But if I add a second category to that same photo it doesn't work (e.g. UX, UI). What do I need to change in the JS code to make it work? Thanks!</p>

<p>HTML    </p>

<pre><code> &lt;div id="filterWrapper"&gt;
                &lt;a data-rel="all"  href="javascript:;" class="filter active"&gt;View all&lt;/a&gt;
                &lt;a data-rel="UX" href="javascript:;" class="filter"&gt;UX Design&lt;/a&gt;
                &lt;a data-rel="UI" href="javascript:;" class="filter"&gt;UI Design&lt;/a&gt;
                &lt;a data-rel="Prototype/Development" href="javascript:;" class="filter"&gt;Prototype/Development&lt;/a&gt;
&lt;/div&gt;
          &lt;ul&gt;
              &lt;li&gt;
                &lt;a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX" &gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class="portfolio-item" data-portfolio-group="gallery" data-filter="UX UI Prototype/Development"&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
</code></pre>

<p>JS</p>

<pre><code>// filter selector
$(".filter").on("click", function () {
    var $this = $(this);
    // if we click the active tab, do nothing
    if ( !$this.hasClass("active") ) {
        $(".filter").removeClass("active");
        $this.addClass("active"); // set the active tab
        // get the data-rel value from selected tab and set as filter
        var $filter = $this.data("rel");
        // if we select view all, return to initial settings and show all

        $filter == 'all' ?
            $(".portfolio-item")
                            .attr("data-portfolio-group", "gallery")
                            .not(":visible")
                            .fadeIn()
        : // otherwise
            $(".portfolio-item")
            .fadeOut(0)

            .filter(function () {
                // set data-filter value as the data-rel value of selected tab
                return $(this).data("filter") == $filter;
            })
            // set data-portfolio-group and show filtered elements
            .attr("data-portfolio-group", $filter)
            .fadeIn(1000);
    } // if
}); // on
</code></pre>