Form repeater not working in Html Table

[MusheAbdulHakim]

The form repeater works fine in regular forms but I want to use the repeater in a table to repeat table row.
Below is my code:

              <table class="table table-hover table-white repeater">
                  <thead>
                      <tr>
                          <th style="width: 20px">#</th>
                          <th class="col-sm-2">Item</th>
                          <th class="col-md-6">Description</th>
                          <th style="width:100px;">Unit Cost</th>
                          <th style="width:80px;">Qty</th>
                          <th>Amount</th>
                          <th> </th>
                          
                      </tr>
                  </thead>
                  <tbody>
                      <div data-repeater-list="items">
                          <tr data-repeater-item>
                              <td>
                                  <input type="text" name="id" class="form-control">
                              </td>
                              <td>
                                  <input class="form-control" name="name" type="text" style="min-width:150px">
                              </td>
                              <td>
                                  <input class="form-control" name="description" type="text" style="min-width:150px">
                              </td>
                              <td>
                                  <input class="form-control" name="unit_cost" style="width:100px" type="text">
                              </td>
                              <td>
                                  <input class="form-control" name="quantity" style="width:80px" type="text">
                              </td>
                              <td>
                                  <input class="form-control" readonly name="amount" style="width:120px" type="text">
                              </td>
                              
                              <td>
                                  <a data-repeater-delete href="javascript:void(0)" class="text-danger font-18" title="Remove">
                                      <i class="fa fa-trash-o"></i>
                                  </a>
                              </td>
                          </tr>
                      </div>
                      <td>
                          <a data-repeater-create href="javascript:void(0)" class="text-success font-18" title="Add">
                              <i class="fa fa-plus"></i>
                          </a>
                      </td>
                  </tbody>
              </table>
          </div>

here is my js

<script>
    $(document).ready(function(){
        'use strict';

        $('table.repeater').repeater({
            show: function () {
                $(this).slideDown();
            },
            hide: function (deleteElement) {
                if(confirm('Are you sure you want to delete this element?')) {
                    $(this).slideUp(deleteElement);
                }
            }
        });
    });
</script>

here is an image of my table

I want to add a new row when the plus button is clicked. I have test this with regular form fields it works fine. but once i put it in the tr and td tags, when i click on the plus button, it doesn't respond.

Below is the result i want to achieve.

[HarishSTOnline]

Try using button element instead of <a>. Else just try input type=button as per the docs and see if that works. If you want fa icon to be displayed you can use button element.

Also try remove the div element inside tbody and use data-repeater-list="items" on tbody. Move your add button outside of tbody.

[MusheAbdulHakim]

Thanks it is working