JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<input type="number" id="nostorey" name="" class=' InputBox' />

<table id="floor">
    <tr id="headtable">
        <td>
            <center>Floor Names</center>
        </td>
        <td>
            <center>Floor wise Area</center>
        </td>
    </tr>
    <tr>
        <td>
            <p>1st Floor</p>
        </td>
        <td>
            <input type='text' id="firstfloor" name='' maxlength="10" value="" class='floor InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>2nd Floor</p>
        </td>
        <td>
            <input type='text' id="secondfloor" name='' maxlength="10" value="" class='floor InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>3rd Floor</p>
        </td>
        <td>
            <input type='text' id="thirdfloor" name='' maxlength="10" value="" class='floor InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>4th Floor</p>
        </td>
        <td>
            <input type='text' id="fourthfloor" name='' maxlength="10" value="" class='floor InputBox' />
        </td>
    </tr>
    <tr>
        <td>
            <p>Total</p>
        </td>
        <td>
            <input type='text' id="total" readonly name='' maxlength="10" value="" class=' InputBoxD' />
        </td>
    </tr>
</table>
<table id="flooring">
    <tbody>
        <tr>
            <td><strong><p>Flooring</p></strong>

            </td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr id="headerfloor">
            <td>
                <hr>
            </td>
            <td> <span class="checkboxfloorspan">1st Floor</span>

            </td>
            <td> <span class="checkboxfloorspan">2nd Floor</span>

            </td>
            <td> <span class="checkboxfloorspan">3rd Floor</span>

            </td>
            <td> <span class="checkboxfloorspan">4th Floor</span>

            </td>
        </tr>
        <tr>
           ...

JavaScript

function addFloors(actual, target){
    for(i = actual +1;i<=target;i++)
        {
            
            newItemHTML = '<tr><td ><p>' + i + 'th Floor</p></td><td><input type="text" name="" class="floor InputBox " id="floor' + i + '"></td></tr>';
     
            $("table#floor tr").last().before(newItemHTML);
        }
}

function removeFloors(target){
    if(target >= 4)
    {
        $('.floor').slice(target).parent().parent().remove();
    }
}
function addCheckbox(actual, target) {
  

    for (var i = actual + 1; i <= target; i++) {
        
        $("table#flooring tr:nth-child(2)").find('td:last-child').after('<td><span class="floorspan">' + i + 'th Floor</span></td>');
        $("table#flooring tr").slice(2).find('td:last-child').after('<td><input value="'+i+'" type="checkbox" class="checkboxfloor materialsfloor' + i + 'th" name="flooring[]"></td>');
        
    }
     var spans =
    $("table#flooring tr").slice(2).find('td:first-child').find('span');
    var textToAdd=[];
    $.each(spans,function(index,value){
        textToAdd.push($(value).text());
    });
    for(var i=0;i<spans.length;i++)
    {
       
        var checks=$("input[value="+(i+5)+"]");
        $.each(checks,function(index,value){
           
            $(value).attr('value',(i+5)+'th Floor '+textToAdd[index]);
        });
        
    }
    
}
function removeCheckbox(target) {
    if (target >= 4) {
        $("table#flooring tr").find('td:eq(' + target + ')').nextAll().remove();
       
    } else {
        $("table#flooring tr").find('td:nth-child(5)').nextAll().remove();
        
    }
}
$("#nostorey").bind('change', function() {
    curVal = $.trim($(this).val()).match(/^\d*$/);
    curFloors = $('.floor').length;
    var numberNotChecked = curVal;
    if(curVal > curFloors)
    {
        addFloors(curFloors, curVal);
    }else if(curVal < curFloors)
    {
        removeFloors(curVal);
    }
    if (numberNotChecked > curFloors) {
            addCheckbox(curFloors,...