<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);
}
This Pen doesn't use any external CSS resources.