Second container does not load jquery masonry in my rails app - ruby-on-rails

Question

I am trying to display my posts organized by date created. Jquery Masonry works fine for the first container, but for the second container it fails to properly load. When I view the code in a web browser it shows this for the second container:
<div id="pins" class="transitions-enabled">
<div class="box panel panel-default">
</div>
</div>
when it should show this (content display for the first container):
<div id="pins" class="transitions-enabled masonry" style="position: relative; height: 247px; width: 448px;">
<div class="box panel panel-default masonry-brick" style="position: absolute; top: 0px; left: 0px;">
</div>
</div>
app/assets/javascripts/pin.js.coffee:
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
views/pins/index.html.erb:
<%= render 'pages/home' %>
<div id="pins-container" class="container">
<% #pins_by_day.each do |day, pins| %>
<h5 align="center"> <%= day.strftime('%B %d, %Y') %> </h5>
<div class="well well-sm">
<div id="pins" class="transitions-enabled">
<% for pin in pins %>
<div class="box panel panel-default">
<%= link_to pin %>
<div class="panel-body">
<p>
<%= pin.description %>
</p>
</div>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
I would appreciate it if someone could explain how to properly load jquery masonry for multiple containers on my page. The first section is loading properly, but the second container is just a single column.

Answer 1

HTML doesn't like it when you have more than one id per page. And jQuery will only find the first one. So if you're ever iterating over a partial or a template, make sure that you either don't use ids, or have the id be dynamic.
So instead of id="pins" try:
<div class="masonry-pins transitions-enabled">
And
$ ->
$('.masonry-pins').imagesLoaded ->
$('.masonry-pins').masonry
itemSelector: '.box'
isFitWidth: true
Also, I imagine inside imagesLoaded callback, you have access to the element at this? Instead of calling $('.masonry-pins').masonry you might just want to call $(this).masonry