JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<table class="table table-bordered table-hover" id="tab_logic">
    <tr id='addr0'>
    <td>
    <div class="input-daterange input-group" id="datepicker"><input required type="text" class="form-control" id="start_date0" name="start_date0" /></div>
   
    </td></tr>
    <tr id='addr1'></tr>
    <tr><a id="add_row" class="btn btn-default pull-left">Add Book</a></tr>
    </table>

JavaScript

$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
    $('#addr'+i).html("<td><div class='input-daterange input-group' id='datepicker1'><input name='start_date"+i+"' required type='text' class='form-control' id='start_date"+i+"' /></div></td>");
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
     
        
        
        $('#start_date'+i).datepicker({
    format: "yyyy-mm-dd",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
    });
        i++;
    });
    
});