JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<INPUT type="button" value="Add Task" onclick="addRow('dataTable')" />

<TABLE id="dataTable" class="tcontent" width="350px" border="1">

  <tr>
    <td rowspan="2"></td>
    <td rowspan="2" align="center">Task No.</td>
    <td rowspan="2" align="center">Task Name</td>
    <td rowspan="2" align="center">Employee Name</td>
    <td colspan="3" align="center">Expected </td>

  </tr>
  <tr>

    <td align="center">Start Date</td>
    <td align="center">End Date</td>
    <td align="center">Duration</td>

  </tr>

  <TR>
    <TD align="center"><INPUT type="checkbox" name="chk" /></TD>
    <TD align="center"><INPUT type="text" name="txt" /></TD>
    <TD align="center"><INPUT type="text" name="txt" /></TD>

    <SELECT name="empid" id="empid" disabled="1" hidden="1">
      <option selected disabled>Emp. ID</option>
      <OPTION value="300">300</OPTION>
      <OPTION value="301">301</OPTION>
      <OPTION value="302">302</OPTION>
      <OPTION value="303">303</OPTION>
      <OPTION value="304">304</OPTION>
      <OPTION value="305">305</OPTION>
      <OPTION value="306">306</OPTION>
      <OPTION value="307">307</OPTION>
      <OPTION value="308">308</OPTION>
    </SELECT>


    <TD align="center">
      <SELECT name="empname" id="empname">
        <option selected disabled>Emp. Name</option>
        <OPTION value="300">Kamala Kannan K.</OPTION>
        <OPTION value="301">Pradeep P.</OPTION>
        <OPTION value="302">Dhivakar K.</OPTION>
        <OPTION value="303">Gopi D.</OPTION>
        <OPTION value="304">304</OPTION>
        <OPTION value="305">Balaji S.</OPTION>
        <OPTION value="306">Soundar S.</OPTION>
        <OPTION value="307">Arul Kumar S.</OPTION>
        <OPTION value="308">308</OPTION>
      </SELECT>
    </TD>

    <TD align="center">

      <div style="display:inline-block; width:150px;">
        <input type="text" class="value1">

      </div>
    </TD>
    <TD align="center">

      <div style="display:inline-block; width:150px;">
       ...

JavaScript

function addRow(tableID) {

  var table = document.getElementById(tableID);

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

  var colCount = table.rows[2].cells.length;

  for (var i = 0; i < colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[2].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
  $(".value2").datepicker('destroy');
  $(".value1").datepicker('destroy');
}
$(document).on('focus', '.value2', function() {
  $(".value2").removeClass('hasDatepicker').datepicker();
  //$(this).datepicker();
});
$(document).on('focus', '.value1', function() {
  //$(this).datepicker();
  $(this).removeClass('hasDatepicker').datepicker();
});