Sample Area

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<table id="TextBoxesGroup">
  <tr>
    <td>
      <input type="text" id="thelist_0_DocDT" name="thelist[0].DocDT" class="DocDT" />
    </td>
    <td>
      <input type="text" id="thelist_0_StartDT" name="thelist[0].StartDT" class="StartDT" />
    </td>
    <td>
      <input type="text" id="thelist_0_EndDT" name="thelist[0].EndDT" class="EndDT">
    </td>
  </tr>

  <tr>
    <td id="TextBoxDiv0"></td>
  </tr>
</table>




<input type="button" value="AddButton" id="addButton">
<input type="button" value="RemoveButton" id="removeButton">

JavaScript

$(document).ready(function() {
   var counter = 1;

   $("#addButton").click(function() {
     if (counter > 4) {
       alert("Only 5 textboxes allow");
       return false;
     }
     var newTextBoxDiv = $(document.createElement('tr')).attr("id", 'TextBoxDiv' + counter);

     var td2 = ' <td><input type="text" name="thelist[' + counter +
       '].DocDT" id="thelist_' + counter +
       '_DocDT" value="" class="DocDT"></td>';

     var td3 = '<td><input type="text" name="thelist[' + counter +
       '].StartDT" id="thelist_' + counter +
       '_StartDT" value="" class="StartDT"></td>';

     var td4 = ' <td><input type="text" name="thelist[' + counter +
       '].EndDT" id="thelist_' + counter +
       '_EndDT" value="" class="EndDT"></td>';

     newTextBoxDiv.after().html(td2 + td3 + td4);
     newTextBoxDiv.appendTo("#TextBoxesGroup");
     counter++;


   });
// you need use for all element both new append html
   $(document).on('keyup', '.DocDT', function() {
     $(this).closest('tr').find('.StartDT, .EndDT').val($(this).val());
   });

   $("#removeButton").click(function() {
     if (counter == 1) {
       alert("No more textbox to remove");
       return false;
     }
     counter--;

     $("#TextBoxDiv" + counter).remove();
   });

 });