JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<table id="tab_logic">
<thead>
<tr>
<th class="text-center">Time</th>
</tr>
</thead>
<tbody class="ui-widget">
<tr id='addr0'>
<td><input type="text" id="datepicker1"/></td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table><br>
<a id="add">Add</a>
JavaScript
function newdp(num) {
$( "#datepicker+num" ).datepicker({
dateFormat: 'yy-mm-dd'
});
};
$(function() {
$( "#datepicker1" ).datepicker({
dateFormat: 'yy-mm-dd'
});
});
$(document).ready(function(){
var i=1;
var j=i+1;
$("#add").click(function(){
$('#addr'+i).html("<td><input type='text' id='datepicker"+j+"'/></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
j++;
newdp(j);
});
});