Chart.js generate chart with foreach mvc

I'm trying to generate line chart for-each row in my table using foreach loop.

unfortunately only the first chart is generated and I haven't found any answers online.

is there a way to do that? I will need to generate 50 line charts per page, each with unique values.

CSHTML

<table class="table">
    <thead>
        <tr>
            <th>Chart</th>         
        </tr>
    </thead>
    <tbody>
        <tr>
            @foreach(var hash in model)
            {
            <td>
                <div height="50" width="80">
                    <canvas id="tableChart" data-hash="@hash.Count" height="50" width="80"></canvas>
                </div>
            </td>
            }
        </tr>
    </tbody>
</table>



 <script>
          var hashCount = $(this).attr('data-hash');
          var ctx = document.getElementById('tableChart').getContext('2d');
        var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["A","B","C","D"],
        datasets: [
            {
                data: [1,2,3, hashCount],
                backgroundColor: ["red", "gray","blue","green"],
                borderColor: "rgb(27,163,198)",
                fill: false,
                lineTension: 0.3,
                radius: 1,
                borderWidth: 1,

            },
        ],
    },
    options: {      
        legend: {
            display: false,
            labels: {
                fontSize: 12,
            },
        },
        tooltips: {

            enabled: false,
            intersect: false,
        },
        display: true,
        responsive: true,
        maintainAspectRatio: false,
    },
        });
</script>