<div class="form">
  <div class="d-flex">
    <div class="input-box">
      <input type="text" value="" id="name" placeholder="Имя">
    </div>
    <div class="input-box">
      <input type="text" value="" id="lastname" placeholder="Фамилия">
    </div>
    <div class="input-box">
      <input type="text" value="" id="sum" placeholder="Сумма">
    </div>
  </div>
  <div class="addline">
    <span>+</span>
  </div>
</div>
<table border="1">
  <tr>
    <th></th>
    <th>Имя</th>
    <th>Фамилия</td>
    <th>Сумма</td>
  </tr>
  <tr class="row">
    <td>1</td>
    <td class="name"></td>
    <td class="lastname"></td>
    <td class="sum"></td>
  </tr>
  <tr class="total_row">
    <td class="ta-right" colspan="3">Итого</td>
    <td class="total"></td>
  </tr>
</table>
.form {
  max-width: 540px;
  margin-bottom: 30px;
}
.d-flex, .addline {
  display: flex;
  margin-bottom: 15px;
}
.d-flex:last-child {
  margin-bottom: 0;
}
.addline {
  justify-content: center;
}
.addline span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border: 1px solid black;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}
.input-box {
  margin-right: 10px;
}
.input-box:last-child {
  margin-right: 0;
}
.ta-right {
  text-align: right;
}
  $('.addline span').on('click', function () {
    $(this).parent().before('<div class="d-flex"><div class="input-box"><input type="text" value="" id="name" placeholder="Имя"></div><div class="input-box"><input type="text" value="" id="lastname" placeholder="Фамилия"></div><div class="input-box"><input type="text" value="" id="sum" placeholder="Сумма"></div></div>');
    var index = $('.row').last().index() + 1;
    $('.total_row').before('<tr class="row"><td>' + index + '</td><td class="name"></td><td class="lastname"></td><td class="sum"></td></tr>');
  });
$(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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js