JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<button id="addinput">Add row</button>
<!--<button id="removerow">Remove row</button>/-->
<input type="button" id="removeRow" value="Delete row" onclick="removeRowFromTable();"/>
<input type='button' value='Get value' id='getButtonValue'>
<table id="tblDetail">
  <tr>
    <td><input name="a[]" class="datepicker" type="text" /></td>    
  </tr>
</table>

CSS

body {font-size: 12px;}

JavaScript

$(function() {
      
    $('#addinput').click(function() {     
            
      var textbox_add = $('<tr><td><input type="text" class="datepicker"  name="a[]" ></td></tr>');
       textbox_add.appendTo('#tblDetail tbody');
       
    });
    
    $('.datepicker').live("click", function() {
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            gotoCurrent: true,
            dateFormat: 'yy-mm-dd',
            yearRange: '1980:c',
            defaultDate: '-10y'
        }).datepicker('show');
    });
});

function removeRowFromTable() {
   var tbl = document.getElementById('tblDetail');
   var lastRow = tbl.rows.length;
   if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}