JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
DAY 1
<div class="placeholder"></div>
DAY 2
<div class="placeholder"></div>
DAY 3
<div class="placeholder"></div>
<input id="btn" type="button" value=" New Chart " />

CSS

div.placeholder {
  width: 400px;
  height: 200px;
}

JavaScript

function getdata() {
  var d1 = [
    [0, 1],
    [1, 4],
    [2, 4],
    [3, 8],
    [4, 2],
    [5, 11],
    [6, 19]
  ];
  var d2 = [
    [7, 1],
    [8, 5],
    [9, 4],
    [10, 13],
    [11, 2],
    [12, 11],
    [13, 19]
  ];
  var d3 = [
    [14, 10],
    [15, 4],
    [16, 14],
    [17, 8],
    [18, 2],
    [19, 1],
    [20, 19]
  ];
  var d4 = [
    [21, 4],
    [22, 11],
    [23, 18],
    [24, 12],
    [25, 1],
    [26, 19],
    [27, 8]
  ];
  var d5 = [
    [28, 5],
    [29, 14],
    [30, 13],
    [31, 2],
    [32, 11],
    [33, 9]
  ];

  return [d1, d2, d3, d4, d5];
}

$(document).ready(function() {
  var dataset = [{
    label: "Day1",
    data: getdata()[0],
    points: {
      symbol: "triangle"
    }
  }, {
    label: "Day2",
    data: getdata()[1],
    points: {
      symbol: "cross"
    }
  }, {
    label: "Day3",
    data: getdata()[2],
    points: {
      symbol: "square"
    }
  }, {
    label: "Day4",
    data: getdata()[3],
    points: {
      symbol: "diamond"
    }
  }, {
    label: "Day5",
    data: getdata()[4],
    points: {
      symbol: "circle",
      color: "black"
    }
  }];

	counter = 0;
  for (var i = 1, j = 0; i < dataset.length, j < $('div.placeholder').length; i++, j++) {
    $.plot("div.placeholder:eq(" + j + ")", [dataset[j]]);
    counter = i;
  }

  function update() {
    $('div.placeholder:visible:first').hide();
    $('div.placeholder:last').after($('<div>').addClass('placeholder'));
    $.plot("div.placeholder:last", [dataset[counter++]]);
  }

  $('#btn').on('click', update);
});