JSFiddle - React, Tailwind, and code Playground

by YameenYasin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="barChart">
  <div class="item clone">
  </div>
</div>
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

CSS

/* CSS to change the color to red for all li except last one */
li:not(:last-child) {
  color: #f00;
}

/* center alignn a div both vertically and horizontally */
.center{
  width:200px;
  height:200px;
  border:1px solid #CCC;
  display: table;
}

#barChart{
  float: left;
  width: 300px;
  height: auto;
  background: #ccc;
}

.item{
  float: left;
  margin-left: 10px;
  width: 20px;
  height: 10px;
  background: #f00;
}

JavaScript

/* Generate Bar Chart */

var chart = [10,20,30,40,30,50];
var max = 50;
var maxHeight = 200;

function generateBarChart(){
	var barchart = $('#barChart');
  console.log("BarChart:" + barchart)
  for(var i = 0; i < chart.length; i++) {
  	var item;
    if (i == 0) {
    	item = barchart.find('.item.clone');
    } else {
    	item = barchart.find('.item.clone').clone();
      item.removeClass('clone');
      barchart.append(item);
    }
  }

}

generateBarChart();