railsのeachメソッドとchart.js

Question

前提・実現したいこと

Ruby on railsで家計簿投稿アプリを作っています。
railsのeachメソッドで持ってきている複数のデータに対して、Chart.jsを使ってそれぞれ円グラフを表示させたいのですが、円グラフは（先頭？）一番最初に表示されるデータのみにしか適応されていませんでした。eachで持ってきている複数のデータに対してそれぞれ円グラフを表示させるにはどのようにすればよいのか教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

window.draw_graph = -> 
    ctx = document.getElementById("myChart")
    aa1 = document.getElementById("a1").textContent;
    aa2 = document.getElementById("a2").textContent;
    myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ["rent", "food"],
            datasets: [{
                data: [aa1,aa2],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)'
                ]
            }]
        },
        options: {
            legend: {
                    display: true,
                    position: 'right'
            }
        }
    })

<% @posts.each do |t| %>
-途中省略-
 <div class ="index-show">
  <%= link_to "家計簿の詳細を見る", post_path(t.id) %> 
 </div>
 <div id="a1"><%= t.rent %></div> 
 <div id="a2"><%= t.food %></div>
 <div class ="index-chart col-xl-12 col-md-12 col-sm-12　col-xs-12 pt-0">
          
  <canvas id="myChart" width="180" height="140" ></canvas>
  <script>
  draw_graph();
  </script>

 </div>
-途中省略-
<% end %>

試したこと

viewファイルに直接記入する方法でも試みてみましたが、結果は同じでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

HTMLの仕様でidは同一ページに1つだけしか使えません。クラスでも使いましょう。
また、繰り返しの中でdraw_graph();ではなくページに1度だけ実行する形（もちろん関数事態もそれに対応するように書き換え）にするか、引数を使うようにでもしなければ複数に対応できないです。

Comments

[56domash_a]

ご回答ありがとうございます。
idのみを振っていた<div>にクラス名を追加し、
for (var num = 0; num < 50; num++) {
var ctx = document.getElementsByClassName("myChart")[num];
var a = document.getElementsByClassName("クラス名")[num].textContent;
var b = document.getElementsByClassName("クラス名")[num].textContent;
}
とすると複数表示されました。
（numの設定はもう少し考える余地がありますが）
参考になりました。ありがとうございました。