JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
                        <div id="header"></div>

                        <div id="content">
                                <div id="search-container" style="padding:50px;border: 1px solid gray;">
                                    <table border="1" id="sample-table">
                                        <thead>
                                            <tr>  
                                                <td><b>Country</b></td>
                                                <td><b>City</b></td>
                                                <td><b>Time</b></td>
                                                <td><b>Delete</b></td>
                                            </tr>

                                        </thead><!-- End Thead-->
                                        <tbody id="tab-body">
                                                
                                        </tbody> <!-- End Tbody -->
                                    </table><!-- End Table -->
                                    <div id="button-panel" style="padding-top:35px;">
                                        <span><button  id="add-row-btn">Add Row</button></span>
                                        <span><button id="toggle-tab-btn" >Hide</button></span>
                                        <hr>
                                    </div>

                                    <div id="tbox-wrapper-div" style="padding-top:50px;">
                                        <label for="dynamic-tbox">Enter Text: </label><input type="text" placeholer="Enter Data" name="dynamic-tbox" id="dynamic-tbox" />
                                        <span><button id="add-txt-btn" >Add Text</button></span>
                                        <span><button id="remove-txt-btn">Remove Text</button></span>
                                        <div id="wrapper-contents">
                                        </div>

                         ...

JavaScript

var rowID=1;
                function getrandomchar(Len,type)
                {
                    var rand="";
                    for(var i=0;i<Len;++i)
                    {
                        if(type==2){
                            rand+= String.fromCharCode(Math.floor(Math.random() * (122 - 97 + 1)) + 97);/*Random Char  b/w a-z*/
                        }
                        else if(type==1){
                            rand+=Math.floor(Math.random() * (9 - 0 + 1)) + 0;/*Random digits b/w 0-9*/
                        }
                        else if(type==3){
                              rand+=(Math.floor(Math.random() * (23 - 0 + 1)) + 0)+":"+(Math.floor(Math.random() * (59 - 0 + 1)) + 0);
                        }
                        else{}
                    }
                    return rand;
                }
                $(document).ready(function()
                {
                    $("#add-row-btn").click(function()
                        {
                           
                            var row_content="<tr><td>"+getrandomchar(Math.floor(Math.random() * (19 - 1 + 1)) + 1,2)+"</td><td>"+getrandomchar(Math.floor(Math.random() * (19 - 1 + 1)) + 1,2)+"</td><td>"+getrandomchar(1,3)+"</td><td><a  href='#' class='delRow' id="+rowID+">Delete</a></td></tr>";
                            rowID++;
                            $('#tab-body').append(row_content);
                        }
                    );
                    /*For Toggling the display of the table*/
                    $("#toggle-tab-btn").click(function()
                        {
                            
                            if(($(this).text())=="Hide")
                            {
                                $('#toggle-tab-btn').text("Show");
                            }
                            else 
                            {
                               $('#toggle-tab-btn').text("Hide");
                            }
           ...