Average_rating with Raty isn't working in my loop

Question

I'm using Raty for my reviews. I want to show the average score per Product in a loop.

If I just use <%= product.average_user %>, then each product will show the correct average number/rating. If I connect the field by id to an embedded script to fetch the stars, then it only 5 empty stars for the first object and nill for the others. This same script does work in my Product-view.

Here's my view's-code WITHOUT the script:

<div class="row">
<br/>
<%= will_paginate @products %>
<% @products.each do |product| %>
    <%= link_to product do %>   
    <div class="col s6 m4 l2">
            <div class="card" style="height: 50px">     
                <div class="row">
                    <div class="col s4 m4 l4">                              
                        <% if !product.external_image.nil? %>
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.external_image, class: "valign" %>
                        </div>  
                        <% else %>                              
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.image, class: "responsive-img" %>
                        </div>
                        <% end %>                                       
                    </div>
                    <div class="col s8 m8 l8">
                        <div class="grey-text text-darken-4 truncate valign" style="height: 25px">
                            <%= product.name %>
                        </div>
                        <div class="divider"></div>
                        <span style="height: 25px">
                        <%= product.average_rating %>
                        </span>             
                    </div>
                </div>
            </div>
        </div>  
    <% end %>
<% end %>
<%= will_paginate @products %>

Here's my view's-code WITH the script:

<div class="row">
<br/>
<%= will_paginate @products %>
<% @products.each do |product| %>
    <%= link_to product do %>   
    <div class="col s6 m4 l2">
            <div class="card" style="height: 50px">     
                <div class="row">
                    <div class="col s4 m4 l4">                              
                        <% if !product.external_image.nil? %>
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.external_image, class: "valign" %>
                        </div>  
                        <% else %>                              
                        <div class="card-image waves-effect waves-block waves-light valign-wrapper">
                            <%= image_tag product.image, class: "responsive-img" %>
                        </div>
                        <% end %>                                       
                    </div>
                    <div class="col s8 m8 l8">
                        <div class="grey-text text-darken-4 truncate valign" style="height: 25px">
                            <%= product.name %>
                        </div>
                        <div class="divider"></div>
                        <span id="average_rating" style="height: 25px">
                        </span>             
                    </div>
                </div>
            </div>
        </div>
        <script>
            $('#average_rating').raty({
                path: '/assets',
                readOnly: true,
                score: <%= product.average_rating %>
            });
        </script>   
    <% end %>
<% end %>
<%= will_paginate @products %>

Any thoughts on what I'm doing wrong here and how to fix it?

Solution:

@user2856118 provided the basis for my answer. I just had to tweak it a little (compare with the answer below for the tweaks). Here's my working code:

Span:

<span id="average_rating_<%= product.id %>" style="height: 25px"></span>

Script:

        <script>
            $('#average_rating_<%= product.id %>').raty({
                path: '/assets',
                readOnly: true,
                score: <%= product.average_rating %>
            });
        </script>   

Answer 1

change <span id="average_rating" style="height: 25px"> to <span id="average_rating_#{product.id}" style="height: 25px"> and then in your script do

$('#average_rating_<%=product.id%>').raty({
            path: '/assets',
            readOnly: true,
            score: <%= product.average_rating %>
        });