JSFiddle - React, Tailwind, and code Playground

by parijatkalia

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<body>
  <h3>Click on a date to view sales</h3>
  <ul class="pagination dates">
  </ul>
  <table class="table table-bordered sales">
    <thead>
      <tr>
        <td>Flower</td>
        <td>Total sold</td>
        <td>Total unsold</td>
      </tr>
    </thead>
  </table>
</body>

JavaScript

$(document).ready(function(){
var sales =[
                {"flower": "tulip", "date": "2/3/2012", "quantitySold": "20", "quantityUnsold": "10"},
        {"flower": "tulip", "date": "2/4/2012", "quantitySold": "18", "quantityUnsold": "12"},
        {"flower": "tulip", "date": "2/5/2012", "quantitySold": "23", "quantityUnsold": "7"},
        {"flower": "tulip", "date": "2/6/2012", "quantitySold": "15", "quantityUnsold": "20"},
        {"flower": "tulip", "date": "2/7/2012", "quantitySold": "12", "quantityUnsold": "23"},
        {"flower": "rose", "date": "2/3/2012", "quantitySold": "50", "quantityUnsold": "40"},
        {"flower": "rose", "date": "2/4/2012", "quantitySold": "43", "quantityUnsold": "47"},
        {"flower": "rose", "date": "2/5/2012", "quantitySold": "55", "quantityUnsold": "35"},
        {"flower": "rose", "date": "2/6/2012", "quantitySold": "70", "quantityUnsold": "20"},
        {"flower": "rose", "date": "2/7/2012", "quantitySold": "30", "quantityUnsold": "70"},
        {"flower": "dandelion", "date": "2/3/2012", "quantitySold": "10", "quantityUnsold": "0"},
        {"flower": "dandelion", "date": "2/4/2012", "quantitySold": "9", "quantityUnsold": "11"},
        {"flower": "dandelion", "date": "2/5/2012", "quantitySold": "3", "quantityUnsold": "17"},
        {"flower": "dandelion", "date": "2/6/2012", "quantitySold": "4", "quantityUnsold": "16"},
        {"flower": "dandelion", "date": "2/7/2012", "quantitySold": "7", "quantityUnsold": "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 =...