Sum of <td> value from dynamic generated table based on checkbox attribute

I have been trying to find the sum of balance (column) of the selected checkbox as below

HTML

<h2>Sum of selected invoices is AED <div class="totalsum"></div></h2>
<table border="1" id="rcpt"><tr><th><input type="checkbox" onClick="selectAll(this),updateSum()" /></th><th>Invoice No.</th><th>Date</th><th>Balance</th></tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="2" onclick="updateSum()" /></td>
  <td>INV-2020-0001</a></td>
  <td>31-05-2020</td>
  <td class="balance">56,842.50</td>
</tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="3" onclick="updateSum()" /></td>
  <td>INV-2020-0002</a></td>
  <td>10-06-2020</td>
  <td class="balance">96,962.60</td>
</tr>
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="4" onclick="updateSum()" /></td>
  <td>INV-2020-0003</a></td>
  <td>15-06-2020</td>
  <td class="balance">100,251.20</td>
</tr>
</table>

PHP (Edit)

<?php
$query = 'QUERY';
$sql = mysqli_query($conn, $query);
while ($result = mysqli_fetch_array($sql)) {
$id = $result['id'];
$inv_no =$result['cinv_no'];
$inv_date = $result['cinv_date'];
$inv_bal = $result['cinv_bal'];

echo '<tr>';
echo '<td><input type="checkbox" class="checkbox" name="select[]" value="'.$id.'" onclick="updateSum()" /></td>';
echo '<td>'.$cinv_no.'</a></td>';
echo '<td>'.date("d-m-Y", strtotime($cinv_date)).'</td>';
echo '<td class="balance">'.number_format($cinv_bal,2).'</td>';
echo '</tr>';
}
?>

Javascript (JS + Jquery)

function selectAll(source) {
  select = document.getElementsByName('select[]');
  for(var i=0, n=select.length;i<n;i++) {
    select[i].checked = source.checked;
  }
}

function updateSum() {
      var total = 0;
      var select = $(".checkbox:checked");
      var balance = $(".balance");
      select.each(function() { total += parseFloat(balance.html().replace(/,/g, ''));})
      $(".totalsum").html(total.toFixed(2));
    }

Whenever I select a random checkbox, it adds the balance in order(first to last) rather than the selected balances

JSFiddle https://jsfiddle.net/cj19zban/

>Solution :

You need to find the .balance related to the checked checkbox.

function updateSum() {
  var total = 0;
  var select = $(".checkbox:checked");
  select.each(function() {
    // get the balance relative to the checked checkbox
    const balance = select.parents('tr').find('.balance');
    total += parseFloat(balance.html().replace(/,/g, ''));
  })
  $(".totalsum").text(total.toFixed(2));
}

However, this is somewhat inefficient. I would do something slightly different. You can store the relative balance as the value of the input.. which saves time figuring out which element to get it from.

const updateTotal = () => {
  const total = $(".checkbox:checked")
    .map((index, checkedCheckbox) => parseFloat(checkedCheckbox.value))
    .toArray()
    .reduce((acc, cur) => acc + cur, 0);
  $('#totalsum').text(total.toFixed(2));
}

const toggleAll = (checked) => {
  $('.checkbox').each((index, checkbox) => {
    checkbox.checked = checked;
  });
}

$('.checkbox').click(updateTotal);
$('#selectAll').click(function() {
  toggleAll($(this).is(':checked'));
  updateTotal();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Receipts</h1>
<h2>Sum of selected invoices is AED
  <div id="totalsum">0.00</div>
</h2>
<table border="1" id="rcpt">
  <tr>
    <th><input id='selectAll' type="checkbox" /></th>
    <th>Invoice No.</th>
    <th>Date</th>
    <th>Balance</th>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="select[]" value="56842.50" /></td>
    <td>INV-2020-0001</td>
    <td>31-05-2020</td>
    <td class="balance">56,842.50</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="select[]" value="96962.60" /></td>
    <td>INV-2020-0002</td>
    <td>10-06-2020</td>
    <td class="balance">96,962.60</td>
  </tr>
  <tr>
    <td><input type="checkbox" class="checkbox" name="select[]" value="100251.20" /></td>
    <td>INV-2020-0003</td>
    <td>15-06-2020</td>
    <td class="balance">100,251.20</td>
  </tr>
</table>

I also removed some trailing </a> that seems to break your HTML.