Как посчитать сумму в таблицы из полей Input

[Gidpoiiohika]

Здравствуйте, помогите не могу понять как мне посчитать суму input в которых класс timer_input и получить суму в конце таблицы. Пробовал много вариантов ну не один не подходит

<table class="table_index">
  <tr class="number_">
    <td>
       <input class="form-control js-time_744 timer_input" step="0.01" type="number" value="6.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="744">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr class="number_">
    <td>
       <input class="form-control js-time_745 timer_input" step="0.01" type="number" value="4.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="745">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <td id="sum_total">Общая сумма</td>
</table>

[Nexus]

document.getElementById('sum_total').textContent = [].reduce.call(
    document.querySelectorAll('input.timer_input'),
    (res, node) => res + +(node.value || 0),
    0
);

[Gidpoiiohika]

Nexus,
Спасибо большое.

[Gidpoiiohika]

Nexus,
Можете ещё подсказать, у меня есть

<ul class="nav nav-tabs">
  <li>
    <a data-toggle="tab" href="#Monday">04 Mar Monday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Tuesday">05 Mar Tuesday 0.0</a>
  </li>
  <li class="active">
    <a data-toggle="tab" href="#Wednesday">06 Mar Wednesday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Thursday">07 Mar Thursday 0.0</a>
  </li>
  <li>
    <a data-toggle="tab" href="#Friday">08 Mar Friday 0.0</a>
  </li>
  <li>
   <a data-toggle="tab" href="#Saturday">09 Mar Saturday 0.0</a></li>
  <li>
   <a data-toggle="tab" href="#Sunday">10 Mar Sunday 0.0</a>
  </li>
</ul>

Когда я нажимаю на любой день у меня открывается таблица, и в таблице есть
например я сейчас на таблице

<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade" id="Monday">

<table class="table_index">
  <tr class="number_">
    <td>
       <input class="form-control js-time_744 timer_input" step="0.01" type="number" value="6.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="744">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr class="number_">
    <td>
       <input class="form-control js-time_745 timer_input" step="0.01" type="number" value="4.0" name="time_tracking[time]" id="time_tracking_time">
       <input type="hidden" name="tracking[id]" id="tracking_id" value="745">
       <input type="hidden" name="time_tracking[user_id]" id="time_tracking_user_id" value="58">
       <input type="hidden" name="time_tracking[date]" id="time_tracking_date">
    </td>
  </tr>
  <tr>
    <td id="sum_total">Общая сумма</td>
  </tr>
</table>

как можно получить суму каждой таблице, сейчас я получаю суму всех таблиц мне нужно что сума отображалась для каждой таблице.

[Nexus]

id - уникальный идентификатор.

Когда я нажимаю на любой день у меня открывается таблица, и в таблице есть
например я сейчас на таблице

Вы по-русски плохо разговариваете?

id="sum_total" замените на class="sum_total"
и попробуйте так:

$('.tab-content .table_index').each(function() {
    $(this).find('.sum_total').text([].reduce.call(
        this.querySelectorAll('input.timer_input'),
        (res, node) => res + +(node.value || 0),
        0
    ));
});

[Gidpoiiohika]

Nexus,
Спасибо большое!!! ну сейчас всё хорошо работает, ну только когда перезагружу страницу, можно как то сделать что бы оно работало без перезагрузки ?

[Gidpoiiohika]

$('body').on('change', '.timer_input', function() {
    $('.tab-content .table_index').each(function() {
      $(this).find('.sum_total').text([].reduce.call(
          this.querySelectorAll('input.timer_input'),
          (res, node) => res + +(node.value || 0),
          0
      ));
    });
  })

[Gidpoiiohika]

Так правильно будет?

$('body').on('change', '.timer_input', function() {
    $('.tab-content .table_index').each(function() {
      $(this).find('.sum_total').text([].reduce.call(
          this.querySelectorAll('input.timer_input'),
          (res, node) => res + +(node.value || 0),
          0
      ));
    });
  })

[Nexus]

Так правильно будет?

попробуйте и узнаете

[Gidpoiiohika]

Nexus,
Спасибо большое за помощь!