JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-striped"  id="tab_logic">
		             <thead>
		               <tr>
                     <td colspan="7">
                      <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row"   class="pull-right btn btn-danger btn-sm">Delete Row</a>
                     </td>
                    </tr>
		             <tr class="success">
		               <th class="text-center">No.</th>
		               <th class="text-center">Start Date</th>
		             </tr>
		             </thead>
		             <tbody >
		             	<tr id='addr0' class="itemsGroup">
						<td align="right">1
						</td>
						          <input type="hidden" name="counter" id="counter" value=1> 
						<td class="col-xs-8">
						  <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
						</td>
					</tr>
          <tr id='addr1'></tr>
          </table>

JavaScript

i = parseInt($('#counter').val());
     $("#add_row").click(function(){
      $('#addr'+i).html("<td align='right'>"+ (i+1) +"</td>\
						<td class='col-xs-2'>\
						  <input type='text' name='harga_start_date[]' id='harga_start_date[]' class='datepick form-control' >\
						</td>");	
      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++;
      });
     $("#delete_row").click(function(){
	       if(i> 1){
			    $("#addr"+(i-1)).html('');
			    i--;
	      }
			   });
			   
		 	
		 $(document).on('focus',".datepick", function(){
			  $(this).datepicker({
			   dateFormat : 'yy-mm-dd',
			   changeMonth: true,
			  changeYear: true
		   });
      });