title: Multiple filters in jQuery
body: <p>I am using <a href="http://mixitup.io/" rel="nofollow">http://mixitup.io/</a> library to provide filtering for my simple list of items. Everything works fine, except one thing: multiple level filters which I need.</p>
  
  <p>I have two types of filtering, one is based on "type", and one on "manufacturer". So, lets say I want to show "typeA" from "manufacturer1", or some other combination. Items would need to satisfy both of those to be shown on the list.</p>
  
  <p>I can't get that to work, and upon clicking on the filters, I can show only "typeA", which will include all manufacturers, or "manufacturerA", which shows multiple types, but that's not what I want.</p>
  
  <p>I have included the jsfiddle with the code I have now here: <a href="http://jsfiddle.net/QtQnB/62/" rel="nofollow">http://jsfiddle.net/QtQnB/62/</a></p>
  
  <p>For the filters, I used this:</p>
  
  <pre><code>&lt;div id="filter"&gt;
      &lt;span&gt;Type&lt;/span&gt;
      &lt;ul class="filter-list"&gt;
          &lt;li data-filter="lemon" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Lemon&lt;/a&gt;&lt;/li&gt;
          &lt;li data-filter="orange" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Orange&lt;/a&gt;&lt;/li&gt;
          &lt;li data-filter="apple" class="filter" data-dimension="type"&gt;&lt;a href="#"&gt;Apple&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
      &lt;span&gt;Manufacturer&lt;/span&gt;
      &lt;ul class="filter-list"&gt;
          &lt;li data-filter="1" class="filter" data-dimension="manufacturer"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
          &lt;li data-filter="2" class="filter" data-dimension="manufacturer"&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The item list is as follows:</p>
  
  <pre><code>&lt;ul id="grid"&gt;
      &lt;li class="mix lemon small"&gt;
          &lt;h3&gt; small Lemon&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix orange small"&gt;
          &lt;h3&gt;small Orange&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix apple medium"&gt;
          &lt;h3&gt;medium Apple&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix lemon big"&gt;
          &lt;h3&gt;big Lemon&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix orange medium"&gt;
          &lt;h3&gt;medium Orange&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
      &lt;li class="mix apple big"&gt;
          &lt;h3&gt;big Apple&lt;/h3&gt;
          &lt;p&gt;Some text here&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And then the simple js code to initialize the mixitup, load initial items and try to apply the filter for multiple categories with the last line, which is not working:</p>
  
  <pre><code>$('#grid').mixitup({
      showOnLoad: "2 orange",
      filterLogic : 'and'});
  
  var $filters = $('.filter-list').find('li'), dimensions = {type: 'orange', manufacturer: '2' };
  
  
  $filters.on('click',function(){
  var $t = $(this),
      dimension = $t.attr('data-dimension'),
      filter = $t.attr('data-filter');
      console.info("dimension: "+dimension);
      console.info("filter "+filter);
      console.info("current filter for this cat: "+dimensions[dimension]);
      dimensions[dimension] = filter;
      console.info("selected filter for this cat: "+dimensions[dimension]);
      console.info("type: "+ dimensions['type']);
      console.info("manufacturer: "+ dimensions['manufacturer']);
      var filterString = dimensions['type'] + " " + dimensions['manufacturer'];
  
  
  
  $('#grid').mixitup('filter',filterString);
  });
  </code></pre>
  
  <p>I looked at other questions, and example they have provided with the library, but I simply cant get this to work.</p>
  
  <p>Thanks</p>