Javascript でfunction関数でチャートを定義し、複数チャートを記載しました。
チャート以外の関数は、複数記載しても動作しますが、添付のチャート関数は、複数記載しても複数の動作が確認できませんでした。
理由に関して、ご指導頂けませんでしょうか。

index.html_case16

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="Shit_jis">
  <title>chart of results</title>
</head>
<body>
<!--ここにグラフが挿入されます-->

</br>

<div style="width: 50%; height: 50%;">
<canvas id="myLineChart" style="width: 50%; height: auto;"></canvas>
</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
    function test_case(){
      var ctx = document.getElementById("myLineChart");
      var myLineChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'],
          datasets: [
            {
              label: '最高気温(度）',
              data: [35, 34, 37, 35, 34, 35, 34, 25],
              borderColor: "rgba(255,0,0,1)",
              backgroundColor: "rgba(0,0,0,0)"
            },
            {
              label: '最低気温(度）',
              data: [25, 27, 27, 25, 26, 27, 25, 21],
              borderColor: "rgba(0,0,255,1)",
              backgroundColor: "rgba(0,0,0,0)"
            }
          ],
        },
        options: {
          title: {
            display: true,
            text: '気温（8月1日~8月7日）'
          },
          scales: {
            yAxes: [{
              ticks: {
                suggestedMax: 40,
                suggestedMin: 0,
                stepSize: 10,
                callback: function(value, index, values){
                  return  value +  '度'
                }
              }
            }]
          },
        }
      });
    }
    test_case();
  </script>
  </br>
  </br>

  <script>
    test_case();
  </script>

</body>
</html>