Javascript-форум - посчитать сумму в каждом столбце динамической таблицы

Здравствуйте!

Есть динамическая таблица вида:

<tr>
<td class="mat_count"><input type="text" id="1_mat_1" name="column_1"/>...</td>
<td class="mat_count"><input type="text" id="1_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="1_mat_3" name="column_3"/></td>
</tr>
<tr>
<td class="mat_count"><input type="text" id="2_mat_1" name="column_1"/></td>
<td class="mat_count"><input type="text" id="2_mat_2" name="column_2"/></td>
<td class="mat_count"><input type="text" id="2_mat_3" name="column_3"/></td>
 </tr>  
... Строк может быть любое количество...

<tr>
<td><input type="text" id="count_1" name="column_1">Сумма 1 столбца</td>
<td><input type="text" id="count_2" name="column_2">Сумма 2 столбца</td>
<td><input type="text" id="count_3" name="column_3">Сумма 3 столбца</td>
</tr>

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

пробую сделать что-то такое:

$(document).on('change','.mat_count', function(){
       var i = 1;
       var j = 1;
        var sum = 0;
               
        $('#'+i+'_mat_1').each(function() {    // тут не понимаю, что делать
          
        sum += parseInt($('#'+i+'_mat_2').val());  
        i++;
        })
        $('#count_'+j).val(sum);
        
    });

Натолкните, пожалуйста, на правильный вариант. Может быть таблицу как-то по-другому организовать.

<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(document).on("input", ".mat_count input", function() { var count = $('[id^="count"]').val(0), len = count.length; $(".mat_count input").each(function(i, el) { i %= len; count[i].value -= -(+el.value || 0) }) }) }); </script> </head> <body> <table> <tr> <td class="mat_count"><input type="text" id="1_mat_1" name="column_1"/></td> <td class="mat_count"><input type="text" id="1_mat_2" name="column_2"/></td> <td class="mat_count"><input type="text" id="1_mat_3" name="column_3"/></td> </tr> <tr> <td class="mat_count"><input type="text" id="2_mat_1" name="column_1"/></td> <td class="mat_count"><input type="text" id="2_mat_2" name="column_2"/></td> <td class="mat_count"><input type="text" id="2_mat_3" name="column_3"/></td> </tr> ... Строк может быть любое количество... <tr> <td><input type="text" id="count_1" name="column_1">Сумма 1 столбца</td> <td><input type="text" id="count_2" name="column_2">Сумма 2 столбца</td> <td><input type="text" id="count_3" name="column_3">Сумма 3 столбца</td> </tr> </table> </body> </html>