Reset calculation after adding row to table-CodePudding

I'm trying to add row to table dynamically and calculates the age from ID card number. ID card number for example: 88xxxxxxxxxx (age 33) // 00xxxxxxxxxx (age 21) // 01xxxxxxxxxx (age 20) and so on.

Problem here, as I'm adding row to the table. First row works fine but for the following rows, the results of age selector is applied to all rows in the table.

I've tried to clear the input of age class as new rows are added but seems like it removes all the input of the age selector as well.

var num = 0;
//adds row to table
$('#addBtn').on('click', function() {
  $('#tbody').append(`<tr id="${  num}">
             <td class="row-index text-center">
             <p>${num}</p>
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control name">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control noic">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control age">
             </td>
              <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button"><span class="glyphicon glyphicon-minus"></span></button>
                </td>
              </tr>`);

  $(".noic").blur(function() {
    var currentYear = new Date().getFullYear().toString().substr(-2); // 20(21)
    var yearNow = new Date().getFullYear(); // 2021
    var yearID = $(".noic").val().substring(0, 2); // from ID: (88)xxxxxxxxxx 
    var age;
    if (yearID > currentYear) {
      age = ( yearNow - ( 1900    yearID));
    } else {
      age = ( yearNow - ( 2000    yearID));
    }
    $(".age").val(age);
  });
});

// removes row from table
$('#tbody').on('click', '.remove', function() {
  var child = $(this).closest('tr').nextAll();
  child.each(function() {
    var id = $(this).attr('id');
    var idx = $(this).children('.row-index').children('p');
    var dig = parseInt(id.substring(1));
    idx.html(`${dig - 1}`);
    $(this).attr('id', `${dig - 1}`);
  });
  $(this).closest('tr').remove();
  num--;
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center">No.</th>
      <th class="text-center">Name</th>
      <th class="text-center">ID Card Number</th>
      <th class="text-center">Age</th>
      <th class="text-center"><button class="btn btn-md btn-primary" id="addBtn" type="button">
      <span class="glyphicon glyphicon-plus"></span>
    </button></th>
    </tr>
  </thead>
  <tbody id="tbody">

  </tbody>
</table>

CodePudding user response：

You need to use $(this) to get a reference to the currently blurred .noic, and use it as a reference to access itself and it's sibling elements:

var num = 0;
//adds row to table
$('#addBtn').on('click', function() {
  $('#tbody').append(`<tr id="${  num}">
             <td class="row-index text-center">
             <p>${num}</p>
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control name">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control noic">
             </td>
             <td class="row-index text-center">
             <input type="text" class="form-control age">
             </td>
              <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button"><span class="glyphicon glyphicon-minus"></span></button>
                </td>
              </tr>`);

  $(".noic").blur(function() {
    var currentYear = new Date().getFullYear().toString().substr(-2); // 20(21)
    var yearNow = new Date().getFullYear(); // 2021
    var yearID = $(this).val().substring(0, 2); // from ID: (88)xxxxxxxxxx 
    var age;
    if (yearID > currentYear) {
      age = ( yearNow - ( 1900    yearID));
    } else {
      age = ( yearNow - ( 2000    yearID));
    }
    $(this).closest("tr").find(".age").val(age);
  });
});

// removes row from table
$('#tbody').on('click', '.remove', function() {
  var child = $(this).closest('tr').nextAll();
  child.each(function() {
    var id = $(this).attr('id');
    var idx = $(this).children('.row-index').children('p');
    var dig = parseInt(id.substring(1));
    idx.html(`${dig - 1}`);
    $(this).attr('id', `${dig - 1}`);
  });
  $(this).closest('tr').remove();
  num--;
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center">No.</th>
      <th class="text-center">Name</th>
      <th class="text-center">ID Card Number</th>
      <th class="text-center">Age</th>
      <th class="text-center"><button class="btn btn-md btn-primary" id="addBtn" type="button">
      <span class="glyphicon glyphicon-plus"></span>
    </button></th>
    </tr>
  </thead>
  <tbody id="tbody">

  </tbody>
</table>