JSFiddle - React, Tailwind, and code Playground

HTML

<button id="addRow">Add Row</button>
<br>
<table id="masterTable" style="position:absolute;top:100px;">
        <tr><td>Col1</td><td>Col2</td><td>Col3</td></tr>
        <tr>
            <td><input id="mss1"></input></td>
			<td><textarea id="mds1"></textarea></td>
            <td><textarea id="mes1"></textarea></td>
        </tr>
 </table>

CSS

table{
border-collapse: collapse;
  border: 1px solid black;
}

td, th {
  border: 1px solid black;
}

JavaScript

var text;  
$('textarea').mouseup(function (e){
       getSelectionText();
    if (text!=""){ alert(text)}   
});
           
           
           
           
            function getSelectionText() {
    text = window.getSelection().toString(); 
       
    //alert(selObj);
    //var selRange = selObj.getRangeAt(0);
}

 $("#addRow").click(function(e){
              var newMasterTable = document.getElementById("masterTable");
         var nos = newMasterTable.rows.length; // Number of Steps : header is count as one row

        var newRow = newMasterTable.insertRow(-1);
        var colx = newRow.insertCell(0);
        $(colx).html("<input id=" + "'mss" + nos + "'" + ">");
        var colx = newRow.insertCell(1);
        $(colx).html("<textarea id=" + "'mds" + nos + "'" + "></textarea>");
        var colx = newRow.insertCell(2);
        $(colx).html("<textarea id=" + "'mes" + nos + "'" + "></textarea>");
         /* the same for the slave table */
        var newMasterTable = document.getElementById("cloneTable");
        var newRow = newMasterTable.insertRow(-1);
        var colx = newRow.insertCell(0);
        $(colx).html("<input id=" + "'sss" + nos + "'" + ">");
        var colx = newRow.insertCell(1);
        $(colx).html("<textarea id=" + "'sds" + nos + "'" + "></textarea>");
        var colx = newRow.insertCell(2);
        $(colx).html("<textarea id=" + "'ses" + nos + "'" + "></textarea>");
     });