JSFiddle - React, Tailwind, and code Playground

HTML

<input onClick="addRow('dataTable')" type="button" value="Add" class="btn btn-primary">  

        <input onClick="deleteRow('dataTable')" type="button" value="Delete" class="btn btn-danger">

        <div style="padding: 20px 0px 0px 0px;">  
            <table id="dataTable" border="0">  
            <tbody>
            <tr>    
                <td width="40px"></td>
                <td align="center">Number</td>
            </tr>
            <tr>  
               <td><input name="chk" type="checkbox"></td>  
               <td>
                    <select id='kap' name='kap'>
                        <option value=''>-- number --</option>
                        <option value="30">30</option>
                        <option value="45">45</option>
                        <option value="60">60</option>
                    </select>
                </td>  
            </tr>  
            </tbody>
            </table>

JavaScript

var numberOfSelects = 1;

addRow = function(tableID) {  

 var table = document.getElementById(tableID);  
 var rowCount = table.rows.length;  
 var row = table.insertRow(rowCount);  

 var cell1 = row.insertCell(0);  
 var element1 = document.createElement("input");  
 element1.type = "checkbox";  
 element1.name="chkbox[]";  
 cell1.appendChild(element1);  

 var cell2 = row.insertCell(1);  
 var element3 = document.getElementById("kap").cloneNode(true);
 element3.id = "kap" + numberOfSelects;
 element3.name = "selectbox[" + numberOfSelects + "]";
 ++numberOfSelects;
 cell2.appendChild(element3);   

 }