JSFiddle - React, Tailwind, and code Playground

HTML

<div class="RRRContentStyle512" id="jsSearchResults" style="display: block;">
                     <table id="contenttable">
        <thead>
            <tr>
                <th><button type="button" id="btn-add-row" onclick="AddTableRowContent();">Add Row</button></th>
            </tr>
            <tr>
                <th>Flat ID</th>
                <th>No's of Room</th>
                <th>Care Take No</th>
                <th>Room Configuration</th>
            </tr>

        </thead>
        <tbody id="tblbody"></tbody>
    </table>
   

    <div id="MdlRoomConfig" title="Configure  Room Attributes " style="width:480px;height:480px">

    </div>
                    
                    </div>

CSS

body {
    font-family:Arial;
}

#arrayContent {
    margin-top: 20px;
    padding: 10px;
    width: 200px;
    height: 50px;    
    background:#f8f8f8;
    border: 1px dotted #666;
}

JavaScript

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    
    <script src=" http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
   
   <script type="text/javascript">

        $(function () {
            $("#MdlRoomConfig").css('display', 'none');
            $('#tblbody').html('');
            AddTableRowContent();
        });
        function AddTableRowContent() {
            var rowCount = $('#tblbody  tr').length;
            var currentRowCount = parseInt(rowCount) + 1;
            var rowContentTemplate = ' <tr><td><input type="text" id="tbl-' + currentRowCount + '-1" placeholder="Enter the room ID" /></td><td><input type="number" id="tbl-' + currentRowCount + '-2" placeholder="Enter the room ID" /></td><td><input type="text" id="tbl-' + currentRowCount + '-3" placeholder="Enter the room ID" /></td><td><button type="button" id="tbl-' + currentRowCount + '-4"  onclick="GetCurrentRowConfig(' + currentRowCount + ')">Room Configuration</button></td></tr>';
            $('#tblbody').append(rowContentTemplate);
        }

        function AddTableRowContentFacility(value) {
            var rowCount = $('#ContentFacility-' + value + ' tblbody tr').length;
            var currentRowCount = parseInt(rowCount) + 1;
            var rowContentTemplate = ' <tr><td><input type="number"  placeholder="Enter  Facility " id="txt-ContentFacility-' + currentRowCount + '-1"  /></td><td><input  placeholder="Enter  Unit " type="number" id="txt-ContentFacility-' + currentRowCount + '-2" /></td></tr>';
            $('#ContentFacility-' + value).append(rowContentTemplate);
        }

        function GetCurrentRowConfig(Value) {
            $('#MdlRoomConfig').html('');

            var vrflatId = $('#tbl-' + Value + '-1').val();
            var GetElementValue = $('#tbl-' + Value + '-2').val();
            var vrCartkNo = $('#tbl-' + Value + '-3').val();

            $("#MdlRoomConfig").css('display', 'block');
            $("#MdlRoomConfig").dialog({
     ...