JSFiddle - React, Tailwind, and code Playground

by parijatkalia

HTML

<body>
  <ul class="dates">

  </ul>
  <table class="sales">
      <thead>
          <tr>
              <td>Flower</td>
              <td>Sold</td>
              <td>Unsold</td>
          </tr>
      </thead>
    </table>
</body>

CSS

ul.dates{
    list-style-type:none;
    
}

.sales{
    display:inline-block;
}
.sales tr td{
    border:1px solid black;
    display:inline-block;
    
}

JavaScript

var sales =[
	{"flower": "tulip", "date": "2/3/2012", "quantity-sold": "20", "quantity-unsold": "10"},
	{"flower": "tulip", "date": "2/4/2012", "quantity-sold": "18", "quantity-unsold": "12"},
	{"flower": "tulip", "date": "2/5/2012", "quantity-sold": "23", "quantity-unsold": "7"},
	{"flower": "tulip", "date": "2/6/2012", "quantity-sold": "15", "quantity-unsold": "20"},
	{"flower": "tulip", "date": "2/7/2012", "quantity-sold": "12", "quantity-unsold": "23"},
	{"flower": "rose", "date": "2/3/2012", "quantity-sold": "50", "quantity-unsold": "40"},
	{"flower": "rose", "date": "2/4/2012", "quantity-sold": "43", "quantity-unsold": "47"},
	{"flower": "rose", "date": "2/5/2012", "quantity-sold": "55", "quantity-unsold": "35"},
	{"flower": "rose", "date": "2/6/2012", "quantity-sold": "70", "quantity-unsold": "20"},
	{"flower": "rose", "date": "2/7/2012", "quantity-sold": "30", "quantity-unsold": "70"},
	{"flower": "dandelion", "date": "2/3/2012", "quantity-sold": "10", "quantity-unsold": "0"},
	{"flower": "dandelion", "date": "2/4/2012", "quantity-sold": "9", "quantity-unsold": "11"},
	{"flower": "dandelion", "date": "2/5/2012", "quantity-sold": "3", "quantity-unsold": "17"},
	{"flower": "dandelion", "date": "2/6/2012", "quantity-sold": "4", "quantity-unsold": "16"},
	{"flower": "dandelion", "date": "2/7/2012", "quantity-sold": "7", "quantity-unsold": "8"}
];
var dates={};
var sale;
$.each(sales,function(index, value){   
  sale = value;
  if(!dates.hasOwnProperty(sale.date)){
    dates[sale.date] = [] ;
    dates[sale.date].push(sale);
  }
  else{
    dates[sale.date].push(sale);
  }
});

$('ul.dates').on('click','li a',function(){
  event.preventDefault();
  var date = $(this).attr("href");
  var sales = dates[date];
  constructSalesDisplayTable(sales);  
});

var listElement= '<li><a href="#"></a></li>', linkTagValue = "";
$.each(dates, function(index,value){
    $('ul.dates').append(listElement);
    $('ul.dates li...