Unable to update the sum of dynamic field values when a dynamic field is deleted-CodePudding

I have an input form that contains rows that are created dynamically, and I have a function that collects the values of two specific fields, and the function works well, but the problem is when a dynamic row is deleted, the result of the sum does not change according to the deletion process. It is required that the sum be updated automatically when a dynamic row is deleted or added

var i = 0;
$("#add-btn").click(function() {
    i;

  $("#dynamicAddRemove").append('<tr><td >'   product_dd   '</td> <td ><input type="number" name="debtor['   i   ']" id="fname" onkeydown="return event.keyCode !== 69" required></td> <td ><input type="number" name="creditor['   i   ']" id="james"  onkeydown="return event.keyCode !== 69" required></td> <td ><input type="text"  name="description['   i   ']"   required></td> <td> <input type="text" name="mount['   i   ']"  required></td><td ><button type="button" name="add" ><i  ></i></button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
});
$(document).ready(function() {
  $(document).on("keyup", ".debtor", function() {
    var sum = 0;
    $(".debtor").each(function() {
      sum  =  $(this).val();
    });
    $('.sum1').val(sum);
  });
});

$(document).ready(function() {
  $(document).on("keyup", ".debtor", function() {
    var sum = 0;
    $(".debtor").each(function() {
      sum  =  $(this).val();
    });
    $('.sum1').val(sum);
  });
});

$(document).ready(function() {
  $(document).on("keyup", ".creditor", function() {
    var sum = 0;
    $(".creditor").each(function() {
      sum  =  $(this).val();
    });
    $('.sum2').val(sum);
  });
});

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

  <title> demo</title>
</head>

<body>
  <table style="text-align:center;" id="dynamicAddRemove">
    <tr style="background-color:#007398;color:white;text-align:center;">
      <th >الحساب</th>
      <th >مدين</th>
      <th >دائن</th>
    </tr>
    <tr>
      <td >
        <select  name="account[]" required>
          <option value="">--الحساب--</option>
        </select>
      </td>
      <td ><input type="number" name="debtor[]" id="fname"  onkeydown="return event.keyCode !== 69" required></td>
      <td ><input type="number" name="creditor[]" id="james"  onkeydown="return event.keyCode !== 69" required></td>
      <td ><button type="button" name="add" id="add-btn" ><i ></i></button></td>
    </tr>
  </table>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>

</html>

CodePudding user response：

Consider the following example.

$(function() {
  function calcSum(sel) {
    var sum = 0;
    $(sel).each(function() {
      sum  = parseInt($(this).val());
    });
    return sum;
  }
  $("#add-btn").click(function() {
    var i = $("#dynamicAddRemove tbody tr").length;
    var product_dd = $("<select>", {
      class: "form-control select_acount js-example-basic-single",
      name: "account[]"
    }).prop("required", true);
    $("#dynamicAddRemove").append('<tr><td >'   product_dd.prop("outerHTML")   '</td> <td ><input type="number" name="debtor['   i   ']" id="fname" onkeydown="return event.keyCode !== 69" required></td> <td ><input type="number" name="creditor['   i   ']" id="james"  onkeydown="return event.keyCode !== 69" required></td> <td ><input type="text"  name="description['   i   ']"   required></td> <td> <input type="text" name="mount['   i   ']"  required></td><td ><button type="button" name="add" ><i  ></i></button></td></tr>');
  });

  $("#dynamicAddRemove").on('click', '.remove-tr', function() {
    if (confirm("Are you sure you wish to remove this entry?")) {
      $(this).parents('tr').remove();
      $('.sum1').val(calcSum(".debtor"));
      $('.sum2').val(calcSum(".creditor"));
    }
  });

  $("#dynamicAddRemove").on("change keyup", ".debtor", function() {
    $('.sum1').val(calcSum(".debtor"));
  });

  $("#dynamicAddRemove").on("change keyup", ".creditor", function() {
    $('.sum2').val(calcSum(".creditor"));
  });
});

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<table style="text-align:center;" id="dynamicAddRemove">
  <thead>
    <tr style="background-color:#007398;color:white;text-align:center;">
      <th >الحساب</th>
      <th >مدين</th>
      <th >دائن</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td >
        <select  name="account[]" required>
          <option value="">--الحساب--</option>
        </select>
      </td>
      <td ><input type="number" name="debtor[]" id="fname"  onkeydown="return event.keyCode !== 69" required></td>
      <td ><input type="number" name="creditor[]" id="james"  onkeydown="return event.keyCode !== 69" required></td>
      <td ><button type="button" name="add" id="add-btn" ><i ></i></button></td>
    </tr>
  </tbody>
</table>
<input type="number"  />
<input type="number"  />

There is still a lot of work to be done here, yet the basic question is addressed. As can be seen, when a Row is removed, the sum is recalculated.