ruby on rails : jsで指定している星が表示されません

Question

現在下記のように、__star_rate__を表示させることをしているのですが、どうも、二つ目以降の__star_rate__の投稿が表示されません。
これは、何故なのでしょうか？
教えてください！

<% @listings.each do |listing| %>
  <div class="card w-75">
    <div class="card-block">
      <div id="average_star_rate"></div>
    </div>
  </div>
  <hr />
  <script>
    $('#average_star_rate').raty({
      path: '/assets',
      readOnly: true,
      score: <%= listing.average_star_rate %>
    });
  </script>
<% end %>

Answer 1

以下のドキュメントに Data Support があります。これを使用してください。
https://wbotelhos.com/raty/

<div class="average_star_rate" data-score="<%= listing.average_star_rate %>"></div>

Comments

[dxo]

ありがとうございます！

Answer 2

おそらく、id="average_star_rate" のように id を使用していることが問題の１つ目です。
id はhtml内で１つしか存在しないことを表す属性です。複数配置しているので先頭のidにのみjsが適用されます。
複数配置する場合は class="average_star_rate" に変更しましょう。
class は同名で複数配置することが可能です。
なお、js側ですが $('.average_star_rate') に変更しましょう。これが class に適用させるセレクタです。

次に <script>...</script> を each の外に出しましょう。 class に変更したので script を複数配置する必要はありません。

Comments

[dxo]

ご回答していただきありがとうございます。
しかし、<script>...</script>ないに、<%= listing.average_star_rate %>のlistingがありまずが、これを外に出すとエラーが発生します。これはどうすれば解決できますでしょうか？
質問続きでもしわけございません。