Myujth

I was told to add a numeric order on a table, but with the condition that when you are adding a table it starts to count from the zero and then you delete the table it throws a dynamical order not 3-5(if i delete 4), I mean it should maintain the order list 1-2-3-4-5 I have a big code and do not want to place it here. Just I have function and

$('td.form_id').each(function(i) 
 $(this).text(i + 1);
);

I want to apply it on my function.

shortly about my function I have a table with the hidden id when I click it it shows me table

<table id="tablo">
 <thead>
 <tr>
 <th></th>
 <th id="tab">Name</th>
 <th id="tab">surname</th>
 <th id="tab">string</th>

 <td>
 <input style="background-color:green; color: white; width: 135px" type="button" class="add" value="Əlavə+">
 </td>

 </tr>
 <tr hidden class="form_id">
 <td>
 <input type="text" style='width:250px'>
 </td>
 <td>
 <input type="text" style='width:250px'>
 </td>
 <td>
 <input type="text" style='width:250px'>
 </td>
 <td>
 <span><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span>
 </td>
 </tr>
 </thead>
 <tbody>
 <tr>

 </tr>
 </tbody>

And a function which is appearing a table each time with the help of append something like this

$(document).ready(function() 

 $(".add").click(function() 

 //$("#td").show();
 var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td style='width:250px'><input type='text' style='width:250px'></td><td style='width:250px'><input type='text' style='width:250px'></td><td style='width:250px'><input type='text' style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
 $("table tbody").append(value);

 );
);

 $(document).ready(function() 

 $(".add").click(function() 

 //$("#td").show();
 var value = "<tr><td class='form_id' style='width:20px' >" + i + "</td><td style='width:250px'><input type='text' style='width:250px'></td><td style='width:250px'><input type='text' style='width:250px'></td><td style='width:250px'><input type='text' style='width:250px'></td><td><span ><a class='fa fa-edit save' style='margin-left:30px' href='javascript: void(0);'>saxla</a></span><span class='delete' style='margin-left:30px'><a class='glyphicon glyphicon-trash'href='javascript: void(0);'>delete</a></span></td>";
 $("table tbody").append(value);


 var i=1;
 $("tbody").find("tr").each(function()
 $(this).find("td.form_id").html(i);
 i++
 );



 );
);