JSFiddle - React, Tailwind, and code Playground

HTML

<script src="x.dpstatic.com/j/jquery/jquery-1.11.0.min.js"></script>
<table...

JavaScript

var tblColors =[];Number.prototype.random =function(){returnMath.floor(Math.random()*this);}

var sat =[17,34,51,68,85,103,120,137,154,171,188,205];// fixed spot - 12 black block out

// as the number of boxes increase, I treat 9 boxes as 1, so in this case there are 31 boxes, total 31 x 9 = 279 boxesvar noOfBox =29;// user can change 29 ,30, 31

function initTblColors(){

if(noOfBox ==29){// $(".twentyNine").removeClass("twentyNine");

}elseif(noOfBox ==30){
$(".twentyNine").removeClass("twentyNine");
$(".thirty").removeClass("thirty");

}elseif(noOfBox ==31){
$(".twentyNine").removeClass("twentyNine");
$(".thirty").removeClass("thirty");
$(".thirty-one").removeClass("thirty-one");

}

var spans = document.getElementById('tbl').getElementsByTagName('td');// Unsure what to type here , I want it to target all td with no class name of tbl label

varColorRemainWithoutBlack= parseInt(spans.length)-12;

for(var i =0; i < spans.length; i++){
spans.style.backgroundColor = tblColors;}var rc, tc1, tc2;for(var j=0; j<ColorRemainWithoutBlack; j++){
rc =(ColorRemainWithoutBlack).random();
tc1 = spans[j].style.backgroundColor;
tc2 = spans[rc].style.backgroundColor;
spans[rc].style.backgroundColor = tc1;
spans[j].style.backgroundColor = tc2;}for(var k=0; k<sat.length; k++){
rc = sat[k];
tc1 = spans[rc].style.backgroundColor;
tc2 = spans[ColorRemainWithoutBlack+1+k].style.backgroundColor;
spans[ColorRemainWithoutBlack+1+ k].style.backgroundColor = tc1;
spans[rc].style.backgroundColor = tc2;

}


}summate();// initTblColors();

function summate(){var colorPicks =['red','lightblue','lime','yellow','pink'];// or ['red','blue','green','yellow','pink']
tblColors.length =0;var cnt;var cnt2;var cnt3;var cnt4;var cnt5;


var cnt =19;// value is generated, not fixedvar cnt2 =34;// value is generated, not fixedvar cnt3 =17;// value is generated, not fixedvar cnt4 =42;// value is generated, not fixedvar cnt5 =102;// value is generated, not fixedfor(var j=0; j<cnt;...