title: Isotope - Loading more than one container on a single page
body: <p>I am calling an isotope layout for multiple containers on the same page. The catch it I would like each container ID to the be the same. Using <a href="http://isotope.metafizzy.co" rel="nofollow">http://isotope.metafizzy.co</a> v.2.1.0 </p>
  
  <p>Isotope will work for the first block, but doesn't trigger for the second block. My feeling is once isotope layout hits the first ID of the first container it stops and doesn't look for the same container again. I've tried using .each() - doesn't seem to want to work however. </p>
  
  <pre><code>&lt;div id="isotope-cat-list"&gt;
      &lt;div class="grid-sizer"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then need to call another isotope block layout again:</p>
  
  <pre><code>&lt;div id="isotope-cat-list"&gt;
      &lt;div class="grid-sizer"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Full HTML would look like this:</p>
  
  <pre><code>&lt;div id="isotope-cat-list"&gt;
      &lt;div class="grid-sizer"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="isotope-cat-list"&gt;
      &lt;div class="grid-sizer"&gt;&lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
           &lt;h1&gt;TITLE&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Obviously there are more elements in those .box elements but for simplicity sake I whittled it down. The reason for multiple calls is they will be for different categories and have other elements in between then and I'd rather not have to call a bunch of container ID's.</p>
  
  <p>When I try to trigger the #isotope-cat-list in my .js library it will run for the first block - but won't trigger for the second block. I've tried doing some jQuery .each() but that didn't work. </p>
  
  <p>Here's the JS:</p>
  
  <pre><code>var mainEl = $('#isotope-cat-list');
  
  mainEl.isotope({
      animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
      itemSelector: '.box',
      animationOptions: {
          duration: transitionDuration
      },
      containerStyle: {
          position: 'relative',
          overflow: 'visible'
      },
      masonry: {
          columnWidth: columnWidth,
          gutter: 1
      }
  });
  </code></pre>
  
  <p>I've tried doing .each():</p>
  
  <pre><code>var mainEl = [$('#isotope-cat-list')];
  
  $.each(mainEl, function (j) {
          this.isotope({
          animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
          itemSelector: '.box',
          animationOptions: {
              duration: transitionDuration
          },
          containerStyle: {
              position: 'relative',
              overflow: 'visible'
          },
          masonry: {
              columnWidth: columnWidth,
              gutter: 1
          }
      });
  });
  </code></pre>
  
  <p>But it still doesn't trigger for the second HTML block. Any help here would be much appreciated! Thanks!</p>