JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<form action="" method="post" id="form">
			<div style="text-align:center;margin-bottom: 20px;" ><h4>ROLE_PROD_EMISSION_PLAN</h4>Portfel: <b>Buruburu</b>
<div class="formInfo">
<select id="year" name="year"  class="" style='width: 200px;' >
            <option value="2008"    
    
>
            	2008
            </option>
            <option value="2009"    
    
>
            	2009
            </option>
            <option value="2010"    
    
>
            	2010
            </option>
            <option value="2011"    
    
>
            	2011
            </option>
            <option value="2012"    
    
>
            	2012
            </option>
            <option value="2013"    
    selected="selected"
>
            	2013
            </option>
            <option value="2014"    
    
>
            	2014
            </option>
            <option value="2015"    
    
>
            	2015
            </option>
            <option value="2016"    
    
>
            	2016
            </option>
            <option value="2017"    
    
>
            	2017
            </option>
            <option value="2018"    
    
>
            	2018
            </option>
            <option value="2019"    
    
>
            	2019
            </option>
            <option value="2020"    
    
>
            	2020
            </option>
    </select>
</div>
	<input id="changeYear" name="changeYear" type="submit" class="submit " style='display:none;'
		value="changeYear"  
		 />
			</div>
		
		<table id="CONTRACTOR_DATA" style="width:95%;text-align:center;">
		<thead>
		<tr><th colspan="3" rowspan="2">CONTRACTOR_DATA</th><th colspan="12">2013</th><th colspan="4">2014</th><th...

CSS

BODY { margin: 0; background-color: #F1F3F5; text-align: center; font-family: verdana,arial,geneva,helvetica;}
			TH{ background-color:#5A579D;COLOR:#FFFFFF;}
			a { cursor: pointer; color: black; }
			a:hover,a.hover { text-decoration: underline; color: black; }


        #wrap{width:1250px}#main{float:left;width:1250px}.formfield *{vertical-align:top}body{text-align:left}table{margin-left:30px}#right{float:right;width:120px}#left{float:left;margin-left:200px}#leftModified{float:left;margin-left:10px;font-size:80%}.selected{border:2px solid #5a579d;line-height:19px;background-color:white;color:black}.section{font-family:Arial;font-size=11pt;font-weight=bold;margin-left:10px;margin-bottom:10px;font-weight:bold;color:#074bb1}.section hr{align:left;color:#074bb1;size:1}span.label{width:200px}#tabs{margin-top:50px;margin-bottom:30px}#productionUnits{text-align:center;margin-bottom:30px}.spaceholder{margin-top:50px}div.block{overflow:hidden}div.block label{width:160px;display:block;float:left;text-align:left}div.block .input{margin-left:4px;float:left}.infoMsg,.successMsg,.warningMsg,.errorMsg,.validationMsg{border:1px solid;margin:10px 0;padding:15px 10px 15px 50px;background-repeat:no-repeat;background-position:10px center}.infoMsg{color:#00529b;background-color:#bde5f8}.successMsg{float:right;color:#4f8a10;background-color:#dff2bf}.warningMsg{color:#9f6000;background-color:#feefb3}.errorMsg{color:#d8000c;background-color:#ffbaba}.ui-widget input{font-size:9pt}.ui-selected,.ui-selecting,.bgSelected{background:#ced7e6}
		
		.tdHead {
		
			background-color: rgb(90, 87, 157);
			color: #ffffff;
			font-family: Arial;
			font-size: 9pt;
		}
		.sumToMe {
			background-color: grey;
		}
		.sumToMe input {
			background-color: grey;
			color: #ffffff;
		}
		input {
			text-align:center;
		}
		.tdVertical {
			writing-mode: tb-rl;
			font-family: Arial;
			font-size: 8pt;
			background-color: grey;
		}

JavaScript

var sumLabel = 'ProductionEmissionPlanSummary';
	var productionEELabel = 'ProductionEmissionPlanProductionEE';
	var productionHeatLabel = 'ProductionEmissionPlanProductionHeat';
	
	$("#year").change(function(){ 
		$("#changeYear").click();
	});
	$(".rowSummary").change(function(){ 
		var rowId = $(this).attr('id').split('_');
		var avarage = $(this).val() / $('.rowSum_'+rowId[1]).length;
		$('.rowSum_'+rowId[1]).each( function( key, value ) {
			$(this).val(avarage);
		});
	});
	function reSum(rowId) {
		var sum=0;
		$('.rowSum_'+rowId).each( function( key, value ) {
			if(jQuery.isNumeric($(this).val())) {
				sum += parseInt($(this).val());
			}
		});
		$('#sum_'+rowId).val(sum);
	}
	function makeTableNicer(tableId,columnId) {
		var columnRef = undefined;
		$(tableId).find('tbody').find("tr").each(function(index, value) {
			$(this).find("td").eq(columnId).attr('rowspan',1);
			
			if(columnRef != undefined && $(this).find("td").eq(columnId).text() == columnRef.text()) {
				$(this).find("td").eq(columnId).hide();
				
				var num = parseInt(columnRef.attr('rowspan'));
				if(!jQuery.isNumeric(num)) {
					num = 1;
				}
				
				columnRef.attr('rowspan',""+(num+1));
			}
			else {
				columnRef = $(this).find("td").eq(columnId);
				columnRef.attr('rowspan',1);
			}
		});
	}
	function setCurrentProductionUnit(value) {
		$("#currentProductionUnit").val(value);
	}
	function mergeTypes(tableId) {
		var prevColumn = undefined;
		$(tableId).find('tbody').find("tr").each(function(index, value) {
			var thisColumn = $(this).find("td:nth-child(3)");
			if(prevColumn != undefined) {
				if(prevColumn.text() == thisColumn.text()) {            
					var html = '';
					html += '<tr class="sumToMe"><td class="tdHead tdVertical" rowspan="1">'+thisColumn.parent().find('td:first').html()+'</td><td rowspan="3" class="tdHead">'+prevColumn.parent().find('td:last').text()+'</td><td class="tdHead">'+sumLabel+'</td>';
					for(var i=0;i < 12;i++) { 
						html += '<td><input...