JSFiddle - React, Tailwind, and code Playground

by acjackson911

HTML

<script src="http://eisenbraun.github.io/columns/javascripts/jquery.columns.min.js"></script>
<div class="dropdown">
	<select name="one" class="dropdown-select">
	<option value="">Select Year</option>
	<option value="0">2014</option>
	<option value="1">2013</option>
	<option value="2">2012</option>
	</select>			
</div>


<div class="dropdown ">
	<select name="two" class="dropdown-select">
	<option value="">Select Month</option>
	<option value="0">January</option>
	<option value="1">February</option>
	<option value="2">March</option>
	<option value="3">April</option>
	<option value="4">May</option>
	<option value="5">June</option>
	<option value="6">July</option>
	<option value="7">August</option>
	<option value="8">September</option>
	<option value="9">October</option>
	<option value="10">November</option>
	<option value="11">December</option>
	</select>			
</div>
<div id="example1">Table</div>

CSS

.dropdown{
   display:inline-block; 
    
}

#example1{
    
    border:1px solid #000;
    height:150px;
    width:300px;
    margin-top:20px;
}

JavaScript

data=[
  {
    "year": "2013",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  },
  {
    "year": "2014",
    "jan": [
      {
        "id": 1,
        "name": "data",
        "actual": "17",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "Feb": [
      {
        "id": 2,
        "name": "data1",
        "actual": "10",
        "target": "19",
        "status": "red",
        "trend": "down"
      }
    ],
    "March": [
      {
        "id": 3,
        "name": "data2",
        "actual": "34",
        "target": "19",
        "status": "green",
        "trend": "down"
      }
    ]
  }
]
var objMonth=null;
var cloneObj;
var MonthMap={'January':'jan','February':'Feb','March':'March'};
$(document).ready(function (){
    cloneObj= $("#example1").clone(); 
    $('select[name=one]').on('change', function() {
        var selectedYear=($("option:selected", this).text());
        if (selectedYear!="Select Year"){
   
        for (var a in data){
            
            if(data[a].year==selectedYear){
                
                objMonth=data[a];
               
                return false;
            }
             }
        }else{
        objMonth=null;
        }
    });
    $('select[name=two]').on('change', function() {
    var selectedYear=($("option:selected",  $('select[name=one]')).text());
        if (selectedYear!="Select Year"){
             var selectedMonth=($("option:selected", this).text());
            var...