i have to call two button click events add and remove from jquery tabs,i’m using jquery forms

this is my code with add and remove buttons on a table inside a jquery tab, but when i call click event it is not calling it.

<div id="tabs-2">
    <form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
    <th class="small">S.No</th>
    <th>LOCO NO</th> 
    <th>SHED</th>
    <th class="sizing"> SCHEDULE</th>
    <th>  PROGARMME </th >
    <th><input type="submit" class="add1" value="+"></th>
    <!-- <th><button id="butVal1" type="button"> + </button></th> -->
    </tr> 
</thead>

<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/>  </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>

and my javascript file is

    (document).ready( function() {
    $("#butVal1").click(function(){
 var rowLen =  $('tr.tabRow1').length;
  if(rowLen>9)
  {
        alert("no of row is reached 10");
  }
  else
  {
 $("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");  

  $(".tabRow1:last").children("td").children("input").each(function(index, element)
          {
      $(element).val("");
  });  
  }
  });
    
$("tabs-1").on("click", "button.remove1", function(){

if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
   $(this).closest("tr.tabRow1").remove();        
}
else
{
  alert("you can't remove this record");
}
});

   
  $("#tabs-1").on("click", ".add1, .remove1", function(){
      
     $("td.sno1").each(function(index,element){                 
         $(element).text(index + 1); 
      });
  });
});

i have added my code above, i need this add and submit button to work from jquery tabs, also these textbox values need to be saved as records, how can i identify each row when i add or remove a row from table

Answer

In below code i have use .length to get the length of row and added 1 for displaying S.no count because count starts from 1. Then,instead of looping through all inputs i have just use .find("input").val("") to empty all inputs values and then finally use appendTo to append tr particular table only.

Then, when user will click on remove button i have get the id of table which will be unique in all tabs and then i have passed this value to the function resetValues to reset the S.no column count onces any row gets removed. So , using table id i have loop through tbody tr and have reset the counts .

Demo Code :

$(document).ready(function() {
  $(function() {
    $("#tabs").tabs();
  });
  //click on add
  $(".add").click(function() {
    var apendTo = $(this).closest("table").find("tbody")
    //get length of trs
    var rowLen = $(this).closest("table").find("tbody tr").length + 1;
    if (rowLen > 9) {
      alert("no of row is reached 10");
    } else {
      //get cloned of tr
      var cloned = $(this).closest("table").find("tbody tr:first").clone(true);
      //set s.no
      cloned.find("td:eq(0)").text(rowLen);
      cloned.find("input").val(""); //empty inputs 
      cloned.appendTo(apendTo) //appends
    }
  });

  $(document).on("click", "button.remove1", function() {
    var table_id = $(this).closest("table").attr("id") //get tablename
    if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {
      $(this).closest("tr.tabRow1").remove();
      resetValues(table_id); //call to reset values
    } else {
      alert("you can't remove this record");
    }
  });


  function resetValues(el) {
    var counter = 2; //initialze to 2 because 1 is fixed
    //looping through tr not first one
    $("#" + el).find("tbody tr:not(:first)").each(function() {
      //find .sno1 class replace its counter
      $(this).find('.sno1').text(counter);
      counter++;
    })
  }
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">FIRST</a></li>
    <li><a href="#tabs-2">SECOND</a></li>
  </ul>
  <div id="tabs-1">
    <form id="DSLform">
      <table id="table-1" class="add1" border="1">
        <!-- DSL -->
        <thead>
          <tr>
            <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
          </tr>
          <tr>
            <th class="small">S.No</th>
            <th>LOCO NO</th>
            <th>SHED</th>
            <th class="sizing"> SCHEDULE</th>
            <th> PROGARMME </th>
            <th><input type="button" class="add" value="+"></th>
          </tr>
        </thead>

        <tbody>
          <tr class="tabRow1" id="1item">
            <td class="sno1">1</td>
            <td><input type="text" name="loco_no" /> </td>
            <td> <input type="text" name="shed" /> </td>
            <td> <input type="text" name="schedule" /> </td>
            <td><input type="text" name="programme" /> </td>
            <td><button type="button" class="remove1">Remove</button></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
  <div id="tabs-2">
    <form id="DSLform">
      <table id="table-2" class="add1" border="1">
        <!-- DSL -->
        <thead>
          <tr>
            <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>
          </tr>
          <tr>
            <th class="small">S.No</th>
            <th>LOCO NO</th>
            <th>SHED</th>
            <th class="sizing"> SCHEDULE</th>
            <th> PROGARMME </th>
            <th><input type="button" class="add" value="+"></th>
          </tr>
        </thead>

        <tbody>
          <tr class="tabRow1" id="1item">
            <td class="sno1">1</td>
            <td><input type="text" name="loco_no" /> </td>
            <td> <input type="text" name="shed" /> </td>
            <td> <input type="text" name="schedule" /> </td>
            <td><input type="text" name="programme" /> </td>
            <td><button type="button" class="remove1">Remove</button></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</div>

Note : Above code will work on any table only you need to make sure id is unique for all tables .