<div class="form_1">
  <div class="d-flex">
    <div class="input-box">
      <input type="text" value="" placeholder="Количество бонусов" id="bonus_quant">
    </div>
  </div>
</div>
<div class="form_2">
  <div class="d-flex">
    <div class="input-box">
      <input type="text" value="" id="lastname" placeholder="Фамилия">
    </div>
    <div class="input-box">
      <input type="text" value="" id="name" placeholder="Имя">
    </div>
    <div class="input-box">
      <input type="text" value="" id="patronymic" placeholder="Отчество">
    </div>
    <div class="input-box">
      <input type="text" value="" id="sum" placeholder="Выплата">
    </div>
    <div class="input-box">
      <input type="text" value="" id="quant" placeholder="Количество">
    </div>
  </div>
  <div class="addline">
    <span>+</span>
  </div>
</div>
<table border="1">
  <tr>
    <th>№</th>
    <th>Имя</th>
    <th>Фамилия</td>
    <th>Выплата</td>
    <th>Количество</th>
    <th>Итого</th>
  </tr>
  <tr class="row">
    <td>1</td>
    <td class="name"></td>
    <td class="lastname"></td>
    <td class="sum"></td>
    <td class="quant"></td>
    <td class="total"></td>
  </tr>
  <tr class="bonus_row">
    <td colspan="3">Бонус</td>
    <td class="sum">750</td>
    <td class="bonus_quant"></td>
    <td class="total"></td>
  </tr>
  <tr class="total_row">
    <td class="ta-right" colspan="5">Итого</td>
    <td class="all_total"></td>
  </tr>
</table>

.form {
  max-width: 540px;
  margin-bottom: 30px;
}
.form_1, .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;
}

$('#bonus_quant').on('change', function () {
  var bonus_quant = $(this).val();
  $('td.bonus_quant').text(bonus_quant);
  var bonus = $('.bonus_row .sum').html();
  $('.bonus_row .total').text(+bonus * +bonus_quant);
});
$('.addline span').on('click', function () {
    $(this).parent().before('<div class="d-flex"><div class="input-box"><input type="text" value="" id="lastname" placeholder="Фамилия"></div><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 class="input-box"><input type="text" value="" id="quant" placeholder="Количество"></div></div>');
    var index = $('.row').last().index() + 1;
    $('.bonus_row').before('<tr class="row"><td>' + index + '</td><td class="name"></td><td class="lastname"></td><td class="sum"></td><td class="quant"></td><td class="total"></td></tr>');
});

$(document).on('change', '.form_2 .input-box input', function () {
    var currindex = $(this).parent().parent().index();
    
    var lastname = $('#lastname').val();
    $('.row').eq(currindex).find('.lastname').html(lastname);

    var name = $('#name').val();
    $('.row').eq(currindex).find('.name').html(name);

    var sum = $('#sum').val();
    $('.row').eq(currindex).find('.sum').html(sum);

    var quant = $('#quant').val();
    $('.quant').html(quant);

    $('.row').each(function () {
      var rowsum = $(this).find('.sum').html();
      var rowquant = $(this).find('.quant').html();
      var rowtotal = rowsum * rowquant;
      $(this).find('.total').text(rowtotal);
    });
});