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;
var template="<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\", \"useNewStyle\":true}' value=\"\" /> </td> <td> <input type=\"time\" id=\"toHr\" data-role=\"datebox\" data-options='{\"mode\": \"timebox\", \"useNewStyle\":true}' value=\"\" /> </td> </tr>";
function cloneRow() {
    
    
    $("#particulars").append(template).parent().trigger('create');;
    $(date1).datebox();
   // $(position).uniform();
   // $("#position"+b).val($("#position").val()); 
   // $("#position"+b).val($("#position").val());
    b++;
    
}