Trying to pull single product into lightbox, but rails pulling multiple/incorrect products

Problem

I have a product page listing each product of a certain group and instead of going to the product show page for each individual product when you click the main image, I would like to load the image into a css3 lightbox.

My code for _product.html.erb is the following:

<% if products.any? %>
<ul id="products" class="inline product-listing" data-hook>
  <% products.each do |product| %>
    <% if product.on_display? %>
      <div class="grid_1">
      <li id="product_<%= product.id %>" class="columns product three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
    <div class="main-image" type="button" value="Zoom In Modal Window" class="popup_button" data-type="zoomin" data-productid="<%= product.id %>">
      <%= large_image(product, :itemprop => "image", :class => "product-image", :class => "popup_button") %>
    </div><!-- main-image-->
    **<div class="overlay-container">
    <div class="product-container zoomin">
        <span class="close">X</span>
        <%= product %>
        <%= large_image(product, :itemprop => "image", :class => "product-image") %>
    </div><!-- window-container zoomin -->
    </div><!-- overlay-container -->**
    <div class="prod_info_box">
    <%= link_to truncate(product.name, :length => 50), product, :class => 'info', :itemprop => "name", :title => product.name %>
    <span class="price selling" itemprop="price"><%= product.price_in(current_currency).display_price %></span>

The lightbox code is in bold. I'm using the same 'product' variable used in the main-image div to pull in the selected single product to the lightbox, but when I use it here, it seems to be pulling in several products and layering them on top of one another. And its not even pulling the correct product object. You click "The Temptress" and it pulls up "The Tim", which is the product at the very bottom right of the grid. Any idea why its doing this since I'm using the same 'product' from

<% products.each do |product| %>

Thanks for your help!

P.S. Here's the coffeescript:

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")
  $(".overlay-container").fadeIn ->
    window.setTimeout (->
      $(".product-container." + type).addClass "product-container-visible"
    ), 100


$(".close").click ->
  $(".overlay-container").fadeOut().end().find(".product-container").removeClass "product-container-visible"
Problem courtesy of: reknirt

Solution

You can add a product id to the using an id (or data attribute if you prefer). So you can do something like:

<div id="<%= product.id %>" class="product-container zoomin">

Then, in your coffeescript, you can do something like:

$(document).ready ->
 $(".popup_button").click ->
  type = $(this).attr("data-type")

  product_id = $(this).attr("data-productid")

  $(".overlay-container").fadeIn ->

    window.setTimeout (->
      $("#" + product_id + ".product-container." + type).addClass "product-container-visible"
   ), 100
Solution courtesy of: Rebitzele

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.