Chart.jsを用いて表示した複数のグラフの要素をクリックすると一番最後に表示したグラフの要素に置き換えられてしまう。

前提・実現したいこと

現在Spring boot + thymeleaf + chart.jsを用いてグラフを表示するサイトを作ろうとしています。

グラフの表示は問題なくできたのですが、グラフの要素のそれぞれにクリックイベントを付けようとすると、
どこの要素をクリックしても一番最後に表示したグラフの値が参照されてしまいます。

おそらく原因はグラフを表示させる変数名が同じになっていることだと思っているのですが、
Thymeleafの事情により変数名をそれぞれ変更させることができません。

何か改善案があれば教えていただけないでしょうか。

該当のソースコード

html
1                       <div th:each="chart: ${charts}">
2						<canvas th:id="${chart.name}" width="300" height="300"></canvas>
3
4						<script th:inline="javascript">
5						var canvas = document.getElementById(/*[[ ${chart.name} ]]*/);
6						var ctx = canvas.getContext('2d');
7
8						var chart = new Chart(ctx, {
9						  type: 'pie',
10						  data: data = {
11						    labels: /*[[ ${chart.label} ]]*/,
12						    datasets: [{
13						      data:  /*[[ ${chart.data} ]]*/,
14						    }]
15						  },
16
17						  options: {
18						    title: {
19						      display: true,
20						      text: /*[[ ${chart.name} ]]*/
21						    }
22						  }
23						});
24
25						document.getElementById( /*[[ ${chart.name} ]]*/ ).onclick = function( evt ) {
26							var activePoints = chart.getElementsAtEvent( evt );
27							if ( activePoints.length > 0 ) {
28								//get the internal index of slice in pie chart
29								var clickedElementindex = activePoints[ 0 ][ '_index' ];
30
31								//get specific label by index
32								var label = chart.data.labels[ clickedElementindex ];
33
34								//get value by index
35								var value = chart.data.datasets[ 0 ].data[ clickedElementindex ];
36
37								console.log( clickedElementindex );
38								console.log( label );
39								console.log( value );
40								
41							}
42						}
43
44						</script>
45

html
1                      <div>
2						<canvas id="type1" width="300" height="300"></canvas>
3
4						<script>
5						var canvas = document.getElementById("type1");
6						var ctx = canvas.getContext('2d');
7
8						var chart = new Chart(ctx, {
9						  type: 'pie',
10						  data: data = {
11						    labels: ["1","2","3","4"],
12						    datasets: [{
13						      data:  [2,3,7,1],
14						    }]
15						  },
16
17						  options: {
18						    title: {
19						      display: true,
20						      text: "java"
21						    }
22						  }
23						});
24
25						document.getElementById("type1").onclick = function(evt){
26						    var activePoints = chart.getSegmentsAtEvent(evt);
27
28						    /* this is where we check if event has keys which means is not empty space */
29						    if(Object.keys(activePoints).length > 0)
30						    {
31						        var label = activePoints[0]["label"];
32						        var value = activePoints[0]["value"];
33						        var url = "http://example.com/?label=" + label + "&value=" + value
34						        /* process your url ... */
35						        alert(url);
36						    }
37						};
38
39						</script>
40
41
42					</div>
43
44					<div>
45						<canvas id="type2" width="300" height="300"></canvas>
46
47						<script>
48						var canvas = document.getElementById("type2");
49						var ctx = canvas.getContext('2d');
50
51						var chart = new Chart(ctx, {
52						  type: 'pie',
53						  data: data = {
54						    labels: ["1,2"],
55						    datasets: [{
56						      data:  [5,3],
57						    }]
58						  },
59
60						  options: {
61						    title: {
62						      display: true,
63						      text: "php"
64						    }
65						  }
66						});
67
68						document.getElementById("type2").onclick = function(evt){
69						    var activePoints = chart.getSegmentsAtEvent(evt);
70
71						    /* this is where we check if event has keys which means is not empty space */
72						    if(Object.keys(activePoints).length > 0)
73						    {
74						        var label = activePoints[0]["label"];
75						        var value = activePoints[0]["value"];
76						        var url = "http://example.com/?label=" + label + "&value=" + value
77						        /* process your url ... */
78						        alert(url);
79						    }
80						};
81
82						</script>
83
84					</div>
85
86
87