Как использовать jQuery для нахождения баланса по дебету и кредиту в таблице строк Django

Пожалуйста, помогите, у меня есть Django приложение, где у меня есть таблица строк, где я получаю числа из базы данных и это работает правильно, у меня есть одна проблема, я хочу вычислить баланс, взяв баланс плюс дебетовая сторона и минус кредитная сторона с помощью jquery, но обратитесь к тому, что я получаю в ссылке, плюс то, что я ожидаю. Note: У меня не получилось использовать сам django, потому что баланс не сохраняется в базу данных

What i get: [https://paste.pics/DW7TA]

Expected: [https://paste.pics/DW7WP]

javascript

< script >
  $(document).ready(function() {
    $('tr').each(function() {
      var balance = [];
      $(this).find('#col1').each(function() {
        var bal = $(this).text();
        if (bal.length !== 0) {
          var bala = $("#balance").text();
          balance = bal + bala
        }
      });
      $(this).find('#col2').each(function() {
        var bal = $(this).text();
        if (bal.length !== 0) {
          var bala = $("#balance").text();
          balance = bala - bal
        }
      });
      $(this).find("#balance").html(balance);
    });
  }); <
/script>

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>DR</th>
    <th>CR</th>
    <th>BALANCE</th>
  </tr>
  {% for statement in customer_stat %}
  <tr style="margin-top: 20px; font-size: 25px; margin-left: 90px;">
    <td class="col" id="col1">{{statement.total_amount}}</td>
    <td class="col" id="col2">{{statement.to_amount}}</td>
    <td id="balance"></td>
  </tr>
  {% endfor %}

</table>

Вернуться на верх