Как подставить данные из динамического элемента в динамический элемент с помощью JQuery?

Question

[Денис Кузьмин]

Нужно заполнить таблицу данными из input и посчитать итоговую сумму.
Пробовал так:

$(document).on('change', '.input-box input', function () {
  var name = $('#name').val();
  $('.name').text(name);
  
  var lastname = $('#lastname').val();
  $('.lastname').text(lastname);
  
  var sum = $('#sum').val();
  $('.sum').text(sum);
});

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

Сумму пробовал считать так:

$('.input-box input').change(sum);
function sum(){
    let result=0;
    $('.sum').each(function(){
        let value = 0;
        if (typeof Number($(this).html()) == 'object'){
          $.each($(this).val(), function(index, val) {
            value += val*1;
          });
        } else {
          value = Number($(this).html());
        }
        result+=value*1;
    });
    $('.total').text(result);
}

Не получилось, в .total записывает "0".

Код на codepen

Answer 1

[0xD34F]

document.querySelector('.form').addEventListener('input', e => {
  const data = Array.from(
    e.currentTarget.children,
    n => Array.from(n.querySelectorAll('input'), m => m.value)
  );

  document.querySelector('.total').innerText = Array
    .from(document.querySelectorAll('.row'))
    .reduce((acc, n, i) => {
      data[i].forEach((m, j) => n.children[j + 1].innerText = m);
      return acc + (data[i].at(-1) | 0);
    }, 0);
});

Comments

[Денис Кузьмин]

Спасибо большое!

[Денис Кузьмин]

Как быть если например такая разметка?

[0xD34F]

Денис Кузьмин, https://qna.habr.com/question/new

[Денис Кузьмин]

0xD34F, сделал https://qna.habr.com/q/1192112