Can't create separate charts using chart.js

Question

I want to display separate charts. When the user selects more than 1 SensorData on the page it should display the data of the sensors separately. What I'm now getting is basically a so called "multi chart", which I do not want.

This is the code for drawing the chart based upon the data that gets returned from the Ajax POST call:

var visualisesensor = [];

$(document).ready(function () {
    //When the button is clicked it should add the ID's from the Sensors I want to visualise in to an array.
    $("#visualisebtn").click(function () {
        $.each($("input[name='removecheckbox']:checked"), function () {
            visualisesensor.push($(this).val());
        });

        //This is where I create multiple DIVs based upon howmany Sensors the user selected to display
        for (var i = 0; i < visualisesensor.length; i++) {
            $("#chart-container").append("<canvas id=" + visualisesensor[i] + "></canvas>");
        }

        //This is where I basically draw the charts based upon the amount of sensors the user selected
        $.ajax({
               url:     "visualise.php",
               method:  "POST",
               data:    {visualisesensor: visualisesensor},
               success: function (data) {
                   var Sensornaam = [];
                   var Temperatuur = [];

                   for (var i in data) {
                       Sensornaam.push("Sensor: " + data[i].Sensornaam);
                       Temperatuur.push(data[i].Temperatuur);
                   }
                   var chartdata = []

                   for (var k = 0; k < data.length; k++) {
                       chartdata = {
                           labels:   Temperatuur,
                           datasets: [
                               {
                                   label:                'Sensor Temperatuur',
                                   backgroundColor:      'rgba(200, 200, 200, 0.75)',
                                   borderColor:          'rgba(200, 200, 200, 0.75)',
                                   hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                                   hoverBorderColor:     'rgba(200, 200, 200, 1)',
                                   data:                 Temperatuur[k]
                               }
                           ]
                       };
                   }

                   for (var j = 0; j < data.length; j++) {
                       var ctx = $("#" + data[j].SensorID);

                       var barGraph = new Chart(ctx, {
                           type: 'bar',
                           data: chartdata,
                       });

                       console.log(chartdata[j]);
                       alert('Chart has been added!');
                   }
               },
               error:   function (data) {
                   console.log(data);
               }
           });
    });
});

This is the visualise.php code:

<?php
//setting header to json
header('Content-Type: application/json');

include ('../DATABASE/connection.php');

if(isset($_POST["visualisesensor"]))
{
        $j = implode(',',$_POST["visualisesensor"]);

        $query = sprintf("SELECT SensorID, Sensornaam, Temperatuur FROM sensoren WHERE SensorID in ($j)");

        $result = $con->query($query);

        //loop through the returned data
        $data = array();
        foreach ($result as $row) {
            $data[] = $row;
        }

        //free memory associated with result
        $result->close();

        //close connection
        $con->close();

        //now print the data
        print json_encode($data);
}
?>

What I'm now getting is a multichart. It display the data that's in the array successfully, but just in the same chart. I want the data of the sensors to be separately displayed. How would I go about this?

What's inside data:

Picture of database: Picture of the output I get (and don't want):

Answer 1

The success function of the $.ajax call is very odd; I can't understand why the data variable is iterated 3 separate times. Since no test data was provided in the question I've reverse-engineered some, based on the code, and created a simplified answer that draws three separate charts:

// spoofed user input for testing.
var visualisesensor = ['1', '2'];

// spoofed ajax result data for test purposes.
var data = [{
  SensorID: '1',
  Sensornaam: 'tempsensor',
  Temperatuur: '45'
}, {
  SensorID: '2',
  Sensornaam: 'meter',
  Temperatuur: '83'
}];

for (var i = 0; i < visualisesensor.length; i++) {
  $("#chart-container").append("<canvas id=" + visualisesensor[i] + "></canvas>");
}

for (var i = 0; i < data.length; i++) {
  var ctx = $("#" + data[i].SensorID);

  var chartdata = {
    labels: [data[i].Sensornaam],
    datasets: [{
      label: 'Sensor Temperatuur',
      backgroundColor: 'rgba(200, 200, 200, 0.75)',
      borderColor: 'rgba(200, 200, 200, 0.75)',
      hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
      hoverBorderColor: 'rgba(200, 200, 200, 1)',
      data: [data[i].Temperatuur]
    }]
  };

  new Chart(ctx, {
    type: 'bar',
    data: chartdata,
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart-container"></div>