JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div class="container">
  <div class="col-md-12">

    <div class="col-md-6 form-group">

      <h3> DataArea</h3>
      <label for="select">charts</label>
      <select class="form-control" id="chartType" name="Chart Type">
        <!– <option> select</option> –>
        <option value="bar" >Barchart</option>
        <option value="line">LineChart</option>
        <option value="pie">PieChart</option>

      </select>

      <form class="form">
        Key:
        <input id="key" name="text" type="text" value="" placeholder="Enter X-Value" > Value:
        <input id="value" type="number" step="any" placeholder="Enter Y-Value">
        <button id="renderButton" >Add DataPoint & Render</button>

        <table class="table table-bordered table-striped" id="maintable">
          <thead>
            <tr>
              <th>key </th>
              <th> value</th>

            </tr>
          </thead>
          <tbody class="tbody">
            <tr>
              <td> </td>
              <td> </td>

            </tr>

          </tbody>
        </table>

      </form>
    </div>
    <div class="col-md-6 form-group">
      <center><b> <h3>Charts</h3></b></center>
      <div id="chartContainer1" style="height: 270px; width: 100%;">
      </div>
      <div id="chartContainer2" style="height: 270px; width: 100%;">
      </div>
    </div>
  </div>
</div>

JavaScript

$(document).ready(function(){

  $("form").submit(function(){

    var KEY = $("#key").val();
    var VALUE = $("#value").val();

    var markup = "<tr><td>" + KEY + "</td><td>" + VALUE + "</td></tr>";
    $("table tbody").append(markup);
    return false;

  });

});

window.onload = function() {
  var dps = [];

  var chart = new CanvasJS.Chart("chartContainer1", {
    animationEnabled: true,
    title: {
      text: "charts"
    },

    data: [{
      type: "bar",
      dataPoints: dps
    }]

  });

  function addDataPointsAndRender() {
    key = Number(document.getElementById("key").value);
    value = Number(document.getElementById("value").value);
    dps.push({
      x: key,
      y: value
    });
    chart.render();

  }

  var renderButton = document.getElementById("renderButton");
  renderButton.addEventListener("click", addDataPointsAndRender);

  var chartType = document.getElementById("chartType");
  chartType.addEventListener( "change", function(){
    chart.options.data[0].type = chartType.options[chartType.selectedIndex].value;
    chart.render();
  });

}