JSFiddle - React, Tailwind, and code Playground

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>

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();
    }
}

$("#nostorey").bind('change', function() {
    curVal = $.trim($(this).val()).match(/^\d*$/);
    curFloors = $('.floor').length;
    
    if(curVal > curFloors)
    {
        addFloors(curFloors, curVal);
    }else if(curVal < curFloors)
    {
        removeFloors(curVal);
    }
    
    $('.floor').each(function(index){
        if(index >= curVal)
        {
            $(this).prop('disabled', true);
        }else
        {
            $(this).prop('disabled', false);
        }
    });
    
});