Isotope is only working in one image container

Question

For some reason JQuery Isotope is only working in one image container. Can anyone tell me why?

    <div id="container"><div>
        <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    </div><div>
        <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
    </div></div>

    <div id="container"><div>
        <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    </div><div>
        <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
    </div></div>

 <script>
  var $container = $('#container');
  $container.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });
  </script>

Answer 1

The issue is you're using two of the same IDs on one page. IDs must be unique, and you must group all your items in one particular ID (which is #container) in order for isotope to apply to all .item nodes. I've clarified the HTML to demonstrate this (this will make all four items interact with each other):

<div id="container">
    <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
    <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>

---

Keep in mind isotope positions all your elements based on the #container width and height, so your chances of having .item in two separate IDs may not work well unless you explicitly declare both IDs. Here's an example of having two separate isotope instances:

<div id="container">
    <img class="item" src="./download/file.php?id=77&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg"  width="200" height="126" />
    <img class="item" src="./download/file.php?id=80&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg"  width="200" height="133" />
</div

<div id="container2">
    <img class="item" src="./download/file.php?id=90&amp;t=1" alt="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" title="gh h gh gjgh h gjjh gk - blog130812_fish.jpg" width="200" height="133" />
    <img class="item" src="./download/file.php?id=92&amp;t=1" alt="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" title="gh h gh gjgh h gjjh gk - 418635_486786424666755_551315440_n.jpg" width="200" height="126" />
</div>

and the JS:

  var $container = $('#container');
  var $container2 = $('#container2');

  $container.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });

  $container2.isotope({
    itemSelector: '.item',
    animationEngine : 'jquery',
    animationOptions: {
        duration: 350,
        easing: 'linear',
        queue: false
    },
    masonry: {
        columnWidth: 203
    }
  });

Good luck!