Javascript Datatable Sum the amount

The amount of Sum is not getting displayed in footer, it is creating additional row and showing sum there. Where as it should be shown in the footer.

Result Image

function calculateColumn(index) {
  var total = 0;
  $('table tr').each(function() {
    var value = parseFloat(($('td', this).eq(index).text()).replace(/,/g, ""));
    if (!isNaN(value)) {
      total += value;
    }
  });
  $('table tfoot td').eq(index).text('Sum: ' + total);
}

$(document).ready(function() {
  var table = $('#example').DataTable({
    lengthChange: false,
    buttons: ['copy', 'excel', 'pdf'],
    paging: false,
    scrollY: 400
  });

  table.buttons().container()
    .appendTo('#example_wrapper .col-md-6:eq(0)');


  $('#example').on('draw.dt', function() {
    $('table thead th').each(function(i) {
      calculateColumn(i);
    });
  });

  $('table thead th').each(function(i) {
    calculateColumn(i);
  });
});
<!DOCTYPE html>
<html data-bs-theme="dark">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" />
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
</head>

<body>

  <div class="table-responsive">
    <table id="example" class="table table-striped cell-border stripe table-bordered table-responsive-xl">

      <tbody>
        <tr>
          <td scope="row">15</td>
          <td>Test Account (1420240741161)</td>
          <td><a href="">-800</a></td>
          <td><a href="">-610.73</a></td>
        </tr>
        <tr>
          <td scope="row">16</td>
          <td>Testing Account (1620240781182)</td>
          <td><a href="">100</a></td>
          <td><a href="">40</a></td>
        </tr>

      </tbody>
      <tfoot>
        <tr class="totalColumn">
          <td style="visibility:hidden;"></td>
          <td style="visibility:hidden;"> </td>
          <td>Sum:</td>
          <td>Sum:</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>

</html>

Repeating text as not allowing to post:

The amount of Sum is not getting displayed in footer, it is creating additional row and showing sum there. Where as it should be shown in the footer.

Result Image