JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css">
<script src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.flipbox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.durationbox.min.js"></script>
<script src="ttp://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.slidebox.min.js"></script>
<script src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<link rel="stylesheet" href="http://uniformjs.com/stylesheets/uniform.default.css">
<script src="http://uniformjs.com/javascripts/jquery.uniform.js"></script>
<table border="1" width="100%" id="table">
    <tbody id="particulars">
        <tr>
            <td>Name of Worker:</td>
            <td>Position/Title:</td>
            <td>Descroption</td>
            <td>Date(dd:mm:y)</td>
            <td>From hr</td>
            <td>To hr</td>
        </tr>
        <tr>
            <td>
                <input type="text" id="workerName1" />
            </td>
             <td>
                <input type="button" value="Add" id="add" onclick="cloneRow();" />
            </td>
            <td>
                <select id="position" class="feature"><option value="Diett" >Diett</option><option value="Bill" >Bill</option></select>
            </td>
            <td>
                <input type="date" id="date1" data-role="datebox" data-options='{"mode": "datebox", "useNewStyle":true}' readonly />
               
            </td>
            <td>
                <input type="time" id="fromHr" data-role="datebox" data-options='{"mode": "timebox",...

JavaScript

var b = 1;

function cloneRow() {
    
    var row = document.getElementById("table");
    var table = document.getElementById("particulars");
    
    var clone = row.rows[1].cloneNode(true);
    var clones = row.rows.length;
    
    var workerName = clone.cells[0].getElementsByTagName('input')[0];
    var position = clone.cells[2].getElementsByTagName('select')[0];
    var date1 = clone.cells[3].getElementsByTagName('input')[0];
    var fromHr = clone.cells[4].getElementsByTagName('input')[0];
    var toHr = clone.cells[5].getElementsByTagName('input')[0];
    var add = clone.cells[1].getElementsByTagName('input')[0];
    
    workerName.id = "workerName" + b;
    position.id = "position" + b;
    date1.id = "date1" + b;
    fromHr.id = "fromHr" + b;
    toHr.id = "toHr" + b;
    add.id = "add" + b;
    $(date1).datebox();
    $('.ui-select', clone).remove();
    clone.cells[2].appendChild(position);
    $(position).selectmenu();
    table.appendChild(clone);
   // $(position).uniform();
   // $("#position"+b).val($("#position").val()); 
   // $("#position"+b).val($("#position").val());
    b++;
    
}