Sample Area

by Ninay is Unknown

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="DT" onchange="sync()"/></td>
          <td><input type="text" id="thelist[0].StartDT" name="thelist[0].StartDT" class="SAME"  /></td>
         <td><input type="text" id="thelist[0].EndDT" name="thelist[0].EndDT"  class="SAME/></td>
    </tr>

    <tr>
     <td id="TextBoxDiv0"></td>
   </tr>
</table>  
	
  
   
  
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' 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="DTicon datepickerA DT" onchange="sync()"></td>';

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

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

             newTextBoxDiv.after().html(
               td2 + td3 + td4 );
           
             newTextBoxDiv.appendTo("#TextBoxesGroup");
             
       
  $('#TextBoxDiv '+ counter ).find(':tr').each(function() {
  $('#thelist[' + counter +  '].DocDT').change(function() {
   $('#thelist[' + counter +  '].StartDT ,#thelist[' + counter + '].EndDT').val($(this).val());
 
 });
});
             counter++;
   

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

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

         });