jquery dynamic row number not working properly

1$(function() {
2  function numberRows($t) {
3    var c = 0;
4    $t.find("tr").each(function(ind, el) {
5      $(el).find("td:eq(0)").html(++c + ".");
6    });
7  }
8  $("#add-service-button").click(function(e) {
9    e.preventDefault();
10    var $row = $("<tr>");
11    $row.append($("<td>"));
12    $row.append($("<td>").html($("#add-service").val()));
13    $row.append($("<td>").html("<a class='del-service' href='#' title='Click to remove this entry'>X</a>"));
14    $row.appendTo($("#service-table tbody"));
15    numberRows($("#service-table"));
16  });
17  $("#form-entry form").submit(function(e) {
18    e.preventDefault();
19    $("#add-service-button").trigger("click");
20  });
21  $("#service-table").on("click", ".del-service", function(e) {
22    e.preventDefault();
23    var $row = $(this).parent().parent();
24    var retResult = confirm("Are you sure you wish to remove this entry?");
25    if (retResult) {
26      $row.remove();
27      numberRows($("#service-table"));
28    }
29  });
30});