JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
Add Chart Count: <input id="chartCount"> 
<button id="renderCharts">Submit</button>
<button id="removeCharts">Clear Charts</button>
<div id="chartsContainer"></div>

JavaScript

var charts = [];

document.getElementById("renderCharts").addEventListener("click",function(){
  renderCharts();
}, false);

document.getElementById("removeCharts").addEventListener("click",function(){
  removeCharts();
}, false);

function renderCharts(){
  var chartCount = document.getElementById("chartCount").value;
  var maxCount = charts.length + Number(chartCount);

  for(var i = charts.length; i < maxCount; i++){
    var dataPoints = [];
    var div = document.createElement("div");
    div.setAttribute("style", "width : 100%; height : 360px");
    div.id = "chartContainer" + i;
    document.getElementById("chartsContainer").appendChild(div);

    charts[i]= new CanvasJS.Chart("chartContainer"+i, {
      title :{
        text: "Chart " + (i + 1)
      },
      data: [{
        type: "line",
        dataPoints: randomData(10)
      }]
    });
    charts[i].render();
  }
}

function randomData(count){
  var dps = [];
  for(var j = 0; j < count ; j++){
    dps.push({ x : j, y : Math.random() * 10 });
  }
  return dps;
}

function removeCharts(){
  for(var i = 0; i < charts.length; i++){
    document.getElementById("chartContainer"+i).outerHTML="";
  }
  charts = [];
  document.getElementById("chartCount").value = " ";
}