jQuery或Javascript（DatePicker）问题

Question

我刚刚开始学习jQuery

我在下面写了一个简单的脚本链接

$(document).ready(function(){
     jQuery(document).delegate('a.add-record', 'click', function(e) {
     e.preventDefault();    
     var content = jQuery('#sample_table tr'),
     size = jQuery('#tbl_posts >tbody >tr').length + 1,
     element = null,    
     element = content.clone();
     
     element.attr('id', 'rec-'+size);
     element.find('.delete-record').attr('data-id', size);
     element.find('.farsidate').attr('id', 'fdate-' + size);
     element.find('.rooz').attr('id', 'rooz-' + size);
     
     element.appendTo('#tbl_posts_body');
     element.find('.sn').html(size);
   });
 
         jQuery(document).delegate('a.delete-record', 'click', function(e) {
     e.preventDefault();    
     var didConfirm = confirm("Are you sure You want to delete");
     if (didConfirm == true) {
      var id = jQuery(this).attr('data-id');
      var targetDiv = jQuery(this).attr('targetDiv');
      jQuery('#rec-' + id).remove();
      
    //regnerate index number on table
    $('#tbl_posts_body tr').each(function(index){
		$(this).find('span.sn').html(index+1);
    });
    return true;
  } else {
    return false;
  }
	});

});

$(document).on('focus',".farsidate", function(){
    $(this).datepicker();
    
});

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<h2>
Please select BASE Date first
</h2>

Base Date:<input type="text" id="pdate" class="farsidate">
<br>
<br>
<a class="btn btn-primary add-record" data-id="1">add Date</a>
<br>
<table id="tbl_posts" border="1">
  <thead>
    <tr align="center">
      <th>#</th>
      <th>Date</th>
      <th>Date difference</th>
      <th></th>
     </tr>
  </thead>
  <tbody id="tbl_posts_body">
    <tr id="rec-1">
      <td><span class="sn">1</span>.</td>
      <td><input type="text" id="fdate-1" class="farsidate"></td>         <td><input type="text" id="rooz-1" class="number"></td>
      <td><a class="btn btn-primary delete-record" data-id="1">del</a></td>
    </tr>   
   </tbody>
</table> 

<table id="sample_table" style="display:none;">
  <tr id="">
    <td><span class="sn"></span>.</td>
    <td><input type="text" id="fdate-" class="farsidate"></td>
    <td><input type="text" id="rooz-" class="number"></td>
    <td><a class="btn btn-primary delete-record" data-id="1">del</a></td>
  </tr>
</table>

用户必须选择一个“基准日期”，然后通过在指定的表中选择不同的日期，在“日期差异”字段中显示所选日期和基准日期之间的天差。工作正常。

请帮助。谢谢 对不起，英语不好