Как подставить данные из динамического элемента в динамический элемент с помощью 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);
});

или

const total = document.querySelector('.total');
const form = document.querySelector('.form');
const formRows = form.getElementsByClassName('d-flex');
const tableRows = document.getElementsByClassName('row');

form.addEventListener('input', ({ target: t }) => {
  const inputBox = t.closest('.input-box');
  const formRow = inputBox.parentNode;
  const iRow = Array.prototype.indexOf.call(formRows, formRow);
  const iCol = -~Array.prototype.indexOf.call(formRow.children, inputBox);

  tableRows[iRow].cells[iCol].textContent = t.value;

  if (iCol === formRow.children.length) {
    total.textContent = Array.prototype.reduce.call(
      formRows,
      (acc, n) => acc + (n.lastElementChild.children[0].value | 0),
      0
    );
  }
});

Comments

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

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

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

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

[0xD34F]

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

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

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