JSFiddle - React, Tailwind, and code Playground

by Tech Savant

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": "roof",
        "location": "roof",
        "material": "Concrete Desk",
        "otherflag": "0"
}, {
    "floorno": "roof",
        "location": "roof",
        "material": "Nipa\/Anahaw\/Cogon",
        "otherflag": "0"
}, {
    "floorno": "roof",
        "location": "roof",
        "material": "123",
        "otherflag": "1"
}, {
    "floorno": "roof",
        "location": "roof",
        "material": "qwe",
        "otherflag": "1"
}, {
    "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"
}, {
    "floorno": "1st Floor",
        "location": "wall",
        "material": "Bamboo",
        "otherflag": "0"
}, {
    "floorno": "2nd Floor",
        "location": "wall",
        "material": "Bamboo",
        "otherflag": "0"
}, {
    "floorno": "3rd Floor",
        "location": "wall",
        "material": "Bamboo",
        "otherflag": "0"
}, {
    "floorno": "1st Floor",
        "location": "wall",
        "material": "cvb",
        "otherflag": "1"
}, {
    "floorno": "2nd Floor",
        "location": "wall",
        "material": "cvb",
        "otherflag": "1"
}, {
    "floorno": "1st Floor",
        "location": "wall",
        "material": "nbm",
        "otherflag": "1"
}];

function rl(s) { return...