title: Mixitup.js and multiple filtering
body: <p>I've taken the code from <a href="http://codepen.io/patrickkunka/pen/iwcap" rel="nofollow">http://codepen.io/patrickkunka/pen/iwcap</a> and modified it, but i can't make it work as desired.</p>
  
  <p>If i select only 1 filter, it works fine - but if i start compare my filters, it's not returning the correct result.</p>
  
  <p>I'm returning the "filters" dynamicly - but that shouldn't be the problem. </p>
  
  <p>Can anyone give me some heads up on this? </p>
  
  <p>Link for js fiddle : </p>
  
  <p><a href="http://jsfiddle.net/u6ksLwts/26/" rel="nofollow">http://jsfiddle.net/u6ksLwts/26/</a></p>
  
  <pre><code>// Loop through all div's with .mix class 
  var genders = [];
  var models = [];
  var brands = [];
  var prices = [];
  
  $(".mix").each(function () {
      addToArrayIfNew(genders, $(this).attr('data-Gender'));
      addToArrayIfNew(models, $(this).data('model'));
      addToArrayIfNew(brands, $(this).data('brand'));
      if ($(this).data('brand').match(/\s/g)){
          $(this).addClass('Brand_' + $(this).data('brand'));
      }
      addToArrayIfNew(prices, $(this).data('price'));
      // Fix invalid css class names 
  
  
  });
  
  // Now return the arrays to HTML code 
  if (models.length &gt; 0) {
      var filterName = 'Model';
      var idName = 'ModelsFilter';
      $("#" + idName).append(RenderHTMLFilterBoxes(filterName, models));
  }
  
  if (genders.length &gt; 0) {
      var filterName = 'Gender';
      var idName = 'GendersFilter';
      $("#" + idName).append(RenderHTMLFilterBoxes(filterName, genders));
  }
  
  if (brands.length &gt; 0) {
      var filterName = 'Brand';
      var idName = 'BrandsFilter';
      $("#" + idName).append(RenderHTMLFilterBoxes(filterName, brands));
  }
  
  function RenderHTMLFilterBoxes(filterName, arraylist) {
      var htmlStr = "";
      for (var i in arraylist) {
          htmlStr = htmlStr + '&lt;div class="filterBoxes"&gt;&lt;div class="checkbox"&gt;';
          htmlStr = htmlStr + '&lt;input type="checkbox" value=".' + filterName + '_' + arraylist[i].replace(/[^a-zA-Z]+/g,'') + '" /&gt;';
          htmlStr = htmlStr + '&lt;label&gt;' + arraylist[i] + '&lt;/label&gt;';
          htmlStr = htmlStr + '&lt;/div&gt;&lt;/div&gt;';
      }
      return htmlStr;
  }
  
  function addToArrayIfNew(arr, item) {
      if (item &amp;&amp; jQuery.inArray(item, arr) == -1) {
          arr.push(item);
      }
  }
  
  function RenderHTMLPriceRange() {
      var lowest = Number.POSITIVE_INFINITY;
      var highest = Number.NEGATIVE_INFINITY;
      var tmp;
      for (var i = prices.length - 1; i &gt;= 0; i--) {
          tmp = prices[i];
          if (tmp &lt; lowest) lowest = tmp;
          if (tmp &gt; highest) highest = tmp;
      }
      console.log(highest, lowest);
  }
  
  
  // MIX IT UP CODE
  
  // To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".
  
  var checkboxFilter = {
      // Declare any variables we will need as properties of the object
      $filters: null,
      $reset: null,
      groups: [],
      outputArray: [],
      outputString: '',
      // The "init" method will run on document ready and cache any jQuery objects we will need.
      init: function () {
          var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
  
          self.$filters = $('#Filters');
          self.$reset = $('#Reset');
          self.$container = $('#Container');
  
          self.$filters.find('.filterBoxes').each(function () {
              self.groups.push({
                  $inputs: $(this).find('input'),
                  active: [],
                  tracker: false
              });
          });
  
         // console.log(self.groups);
  
          self.bindHandlers();
      },
  
      // The "bindHandlers" method will listen for whenever a form value changes. 
  
      bindHandlers: function () {
          var self = this;
  
          self.$filters.on('change', function () {
              self.parseFilters();
          });
  
          self.$reset.on('click', function (e) {
              e.preventDefault();
              self.$filters[0].reset();
              self.parseFilters();
          });
      },
  
      // The parseFilters method checks which filters are active in each group:
  
      parseFilters: function () {
          var self = this;
  
          // loop through each filter group and add active filters to arrays
  
          for (var i = 0, group; group = self.groups[i]; i++) {
              group.active = []; // reset arrays
              group.$inputs.each(function () {
                  $(this).is(':checked') &amp;&amp; group.active.push(this.value);
              });
              group.active.length &amp;&amp; (group.tracker = 0);
          }
  
        //  console.log(self.groups);
  
          self.concatenate();
      },
  
      // The "concatenate" method will crawl through each group, concatenating filters as desired:
  
      concatenate: function () {
          var self = this,
              cache = '',
              crawled = false,
              checkTrackers = function () {
                  console.log(1);
                  var done = 0;
  
                  for (var i = 0, group; group = self.groups[i]; i++) {
                      (group.tracker === false) &amp;&amp; done++;
                  }
  
                  return (done &lt; self.groups.length);
              },
              crawl = function () {
                 // console.log(2);
                  for (var i = 0, group; group = self.groups[i]; i++) {
                      group.active[group.tracker] &amp;&amp; (cache += group.active[group.tracker]);
  
                      if (i === self.groups.length - 1) {
                          self.outputArray.push(cache);
                          cache = '';
                          updateTrackers();
                      }
                  }
              },
              updateTrackers = function () {
                  //console.log(3);
                  for (var i = self.groups.length - 1; i &gt; -1; i--) {
                      var group = self.groups[i];
  
                      if (group.active[group.tracker + 1]) {
                          group.tracker++;
                          break;
                      } else if (i &gt; 0) {
                          group.tracker &amp;&amp; (group.tracker = 0);
                      } else {
                          crawled = true;
                      }
                  }
              };
  
          self.outputArray = []; // reset output array
  
          do {
              crawl();
          }
          while (!crawled &amp;&amp; checkTrackers());
  
          self.outputString = self.outputArray.join();
  
          // If the output string is empty, show all rather than none:
  
          !self.outputString.length &amp;&amp; (self.outputString = 'all');
  
          //console.log(self.outputString); 
  
          // ^ we can check the console here to take a look at the filter string that is produced
  
          // Send the output string to MixItUp via the 'filter' method:
  
          if (self.$container.mixItUp('isLoaded')) {
             // console.log(4);
              self.$container.mixItUp('filter', self.outputString);
            //  console.log(self.outputString);
          }
      }
  };
  
  // On document ready, initialise our code.
  
  $(function () {
      // To avoid non javascript browsers not to see the content, the display:none will first be set
      // here, instead of the CSS file
  
      // Initialize checkboxFilter code
  
      checkboxFilter.init();
  
      // Instantiate MixItUp
       $(".mix").css("display", "none");
      $('#Container').mixItUp({
          load: {
              filter: 'none'
          },
          controls: {
              toggleLogic: 'or',
              toggleFilterButtons: true,
              enable: true // we won't be needing these
          },
          animation: {
              easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
              duration: 600
          }
      });
  });
  </code></pre>
  
  <p>HTML : </p>
  
  <pre><code>&lt;div id="Filters"&gt;
      &lt;div id="GendersFilter"&gt;&lt;/div&gt;
      &lt;div id="BrandsFilter"&gt;&lt;/div&gt;
      &lt;div id="ModelsFilter"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Container"&gt;
      &lt;div class="mix Brand_MystBrandname Model_ Gender_0" data-Gender="0" data-Brand="My 1st. Brand name!" data-Model="" data-Price="1000"&gt;My 1st. Brand name!&lt;/div&gt;
      &lt;div class="mix Brand_Casio Model_ Gender_0" data-Gender="0" data-Brand="Casio" data-Model="" data-Price="10"&gt;My casio block&lt;/div&gt;
      &lt;div class="mix Brand_Seiko Model_ Gender_2" data-Gender="2" data-Brand="Seiko" data-Model="Precision" data-Price="200"&gt;My seiko block&lt;/div&gt;
      &lt;div class="mix Brand_Nikon Model_Lada Gender_1" data-Gender="1" data-Brand="Nikon" data-Model="Lada" data-Price="40"&gt;My Nikon block&lt;/div&gt;
      &lt;div class="mix Brand_DELL Model_2 Gender_Inspirion" data-Gender="1" data-Brand="DELL" data-Model="Inspirion" data-Price="500"&gt;My Dell block&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"&gt;&lt;/script&gt;
  </code></pre>