JSFiddle - React, Tailwind, and code Playground

HTML

<table id="flooring">
    <tr>
        <td><strong><p>Flooring</p></strong>

        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>
            <hr/>
        </td>
        <td> <span>1st Floor</span>

        </td>
        <td> <span>2nd Floor</span>

        </td>
        <td> <span>3rd Floor</span>

        </td>
        <td> <span>4th Floor</span>

        </td>
    </tr>
    <tr>
        <td><span>Reinforced Concrete</span>

        </td>
        <td>
            <input type="checkbox" value="1st Floor Reinforced Concrete" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="2nd Floor Reinforced Concrete" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="3rd Floor Reinforced Concrete" value="1" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="4th Floor Reinforced Concrete" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td><span>Plain Cement</span>

        </td>
        <td>
            <input type="checkbox" value="1st Floor Plain Cement" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="2nd Floor Plain Cement" class="floor2nd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="3rd Floor Plain Cement" class="floor3rd checkboxfloor" name="flooring[]" />
        </td>
        <td>
            <input type="checkbox" value="4th Floor Plain Cement" class="floor4th checkboxfloor" name="flooring[]" />
        </td>
    </tr>
    <tr>
        <td><span>Marble</span>

        </td>
        <td>
            <input type="checkbox" value="1st Floor Marble" class="floor1st checkboxfloor" name="flooring[]" />
        </td>
       ...

CSS

/*
My Streamlined Version of the Flooring jQuery Thingamajig

*/

JavaScript

var strucmat = [
    {
    "floorno": "1st Floor",
        "location": "floor",
        "material": "Tiles",
        "otherflag": "0"
}, {
    "floorno": "2nd Floor",
        "location": "floor",
        "material": "Tiles",
        "otherflag": "0"
}, {
    "floorno": "3rd Floor",
        "location": "floor",
        "material": "Tiles",
        "otherflag": "0"
}, {
    "floorno": "2nd Floor",
        "location": "floor",
        "material": "zxc",
        "otherflag": "1"
}, {
    "floorno": "1st Floor",
        "location": "floor",
        "material": "asd",
        "otherflag": "1"
}, {
    "floorno": "3rd Floor",
        "location": "floor",
        "material": "zxc",
        "otherflag": "1"
}, {
     "floorno": "4rd Floor",
        "location": "floor",
        "material": "zxc",
        "otherflag": "1"
}];


function cf(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,w,x,y,z,aa,bb,cc,dd,ee,gg,hh,jj,kk,mm,nn){ 
 for(var ii=0,xx=arguments,ww=xx[atob(nn)];ii<ww;ii++){xx[ii]=atob(xx[ii]);} 
 function gi(tt,ii,v,ff,rl){return(tt===u?'<'+kk+'><'+i+' '+t+'="'+b+'" '+mm+'="'+cc+dd+f+'" '+jj+'="'+dd+'[]" />'+
  hh+'('+gg+')<'+i+' '+t+'="'+bb+'" '+z+'="'+v[m]+'" '+jj+'="'+f+'_'+i+bb+'_'+cc+rl+'" '+mm+'="'+g+'" '+ee+'="'+f+
  '_'+i+bb+'_'+cc+rl+'"></'+kk+'>':'')+'<'+kk+'><'+i+' '+t+'="'+b+'" '+mm+'="'+m+'s'+f+rl+ii+' '+b+f+'" '+jj+'="'+
  q+'[]" '+(ii===(parseInt(ff))?c:'')+' /></'+kk+'>';}
 return function(zz,v){var sl=v[k][w](0,1)-1;var rl=v[m][aa](' ','');var yy='';
  v[l]===f?(v[o]==='0'?$(i+'['+z+"*=\""+v[m]+"\"]."+f+v[k][w](0,3))[p](c,y) : 
   ($(i+'['+z+'*="'+v[m]+'"].'+g).val()?$(i+"["+t+"=\""+b+"\"]."+m+"s"+f+rl+sl)[p](c,y) : 
    $("#"+q+">"+j+">"+u+r+":"+s)[a]($('<'+u+r+'/>')[h](function(){    
     $('#'+q+' '+u+r+':'+s+'-'+d+' '+i+'.'+b+f)[e](function(iii) { 
      yy=yy+gi((iii===0?u:x),iii,v,sl,rl);});return yy;})))):n;};}...