I am working on an Analysis part of my project and I have two buttons, which each button have different data by clicking them, and I want use jQuery to be loading data to the same canvas ID. This works on chartjs 2.9.4 but not working on chartjs 3.9.4

<button id="getGenderVote">Load Gender Data </button>

<button id="getSubRegion">Load Sub Region Data </button>`

<canvas id="myChart_j"  ></canvas>

$("#getGenderVote").on("click", function () {
  new Chart("myChart_j", {
    type: "bar",
    data: {
      labels: xValues1,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: yValues1,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: yValues2,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: yValues3,
        },
      ],
    },
  }
});

$("#getSubRegion").on("click", function () {
  new Chart("myChart_j", {
    type: "bar",
    data: {
      labels: subRegion,
      datasets: [
        {
          label: "Eligible Voters",
          backgroundColor: "Red",
          data: subElectorateCount,
        },
        {
          label: "Accredited Voters",
          backgroundColor: "Yellow",
          data: subRegionCount,
        },
        {
          label: "Voted Voters",
          backgroundColor: "green",
          data: subVotedCount,
        },
      ],
    },
  }
});