I have a multi Step form with a progress bar, where i added an editable table, everything works fine except the "add row" button, it refreshes the page and i lose all the data of the table, and the new row doesn't show up after the reload.

When i test this code in a separate html file it works perfectly, but when i insert it into the multi step form it doesn't work

  $(".add-row").click(function(){
   
    $("#editableTable").find("tbody").append("<tr><td data-field='name'></td><td data-field='name'></td><td data-field='name'></td><td data-field='name'></td><td><a class='button button-small edit' title='Edit'><i class='fa fa-pencil'></i></a> <a class='button button-small' title='Delete'><i class='fa fa-trash'></i></a></td></tr>");

  });

                          <div class="row">
                            <div class="col-md-12">
                              <br>
                              
                              <button class="btn btn-default pull-right add-row"><i class="fa fa-plus"></i>&nbsp;&nbsp; Add Row</button>
                       
                          </div>
                          </div>
                        
                          <div class="row">
                            <div class="col-md-12">
                              <table class="table table-bordered" id="editableTable">
                                <thead>
                                  <tr>
                                    <th>Expected results</th>
                                    <th>Perimeter</th>
                                    <th>Quantity</th>
                                    <th>Price</th>
                                    <th>Edit</th>
                                  </tr>
                                </thead>
                                <tbody>
                                 
                                </tbody>
                              </table>
                            </div>
                          </div> 
                        </div>