title: Multiple instances of isotope jQuery
body: <p>I have a really weird problem</p>
  
  <p>I am loading two separate divs as show below, the span element is in order to store how many items per row exist in each Isotope's instance</p>
  
  <pre><code>&lt;div class='instagram' id='insta12'&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;span id="hiddenValue" &gt;5&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class='instagram' id='insta101'&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;div class="item"&gt;...&lt;/div&gt;
  &lt;span id="hiddenValue"&gt;3&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my js file is as shown below</p>
  
  <pre><code>jQuery(document).ready(function($) {
    var tmpNum="";
    var numberOfImages=3;
    var $container = $('.instagram');
    $container.each(function ()  {
  
    tmpNum=  $(this).find('span#hiddenValue').text();
    numberOfImages=parseInt(tmpNum);
    var tmpid=$(this).attr("id");
    alert(tmpid);
      $("#"+tmpid).imagesLoaded(function() {
        $("#"+tmpid).isotope({ 
          resizable: false, 
          // disable normal resizing
          // set columnWidth to a percentage of container width
          masonry: { 
          columnWidth:  $("#"+tmpid).width() / numberOfImages 
          } 
        });
  
      }); //isotope
    });         //each
  }); //dom ready
  </code></pre>
  
  <p>Although it seems that the script is working, the second container has as much items per row as the first container. Any ideas?</p>