JSFiddle - React, Tailwind, and code Playground
HTML
<div id="formularioMateriais">
<div class="row">
Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
Material.........:<input name="nomeMaterial[]" id="" type="text" class="form-control nomeMaterial" value="" required><br>
Compimento..:<input name="comprimentoMaterial[]" id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
Altura.............:<input name="alturaMaterial[]" id="" type="text" class="form-control alturaMaterial" value="" required>
<a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>
<b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
<hr>
</div>
<div class="row">
Volume.........: <input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required><br>
Material.........:<input name="nomeMaterial[]" id="" type="text" class="form-control nomeMaterial" value="" required><br>
Compimento..:<input name="comprimentoMaterial[]" id="" type="text" class="form-control comprimentoMaterial" value="" required><br>
Largura..........:<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required><br>
Altura.............:<input name="alturaMaterial[]" id="" type="text" class="form-control alturaMaterial" value="" required>
<a href="#" class="btn btn-success btn-xs adicionarCampo2" data-id="2" id="" style="margin:35px 0 0 0"><i class="fa fa-plus bigger-110 icon-only"></i>+ </a><br>
<b>Soma da linha</b>.:<input name="cubagemMateriais[]" id="cubagemMateriais" type="text" >
...
JavaScript
$('#formularioMateriais').on('click', '.adicionarCampo2', function (e) {
var clone = $(e.target).closest('.row').clone();
$('#formularioMateriais').append(clone);
// adicionar botão para remover
if (clone.find('a.linkRemover').length) return;
var remover = clone.find('a.adicionarCampo2').clone();
remover.removeClass('adicionarCampo2 btn-success').addClass('btn-danger btn-xs linkRemover');
remover.find('i').removeClass('fa-plus').addClass('fa-times');
clone.find('a.adicionarCampo2').after(remover);
});
$('#formularioMateriais').on('click', '.linkRemover', function (e) {
$(e.target).closest('.row').remove();
});
/////////////////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function () {
$(".alturaMaterial, .comprimentoMaterial, .larguraMaterial, .volumeMaterial").on('keyup', function () {
var $row = $(this).closest('.row');
var cubagemMateriais = [".volumeMaterial", ".comprimentoMaterial", ".larguraMaterial", ".alturaMaterial"].reduce(function (soma, classe) {
var value = parseInt($row.find(classe).val(), 10);
return value * soma;
}, 1);
$row.find('input[name="cubagemMateriais[]"]').val(cubagemMateriais || 0);
// somar todas as linhas
var total = $('input[name="cubagemMateriais[]"]').get().reduce(function (soma, input) {
var value = parseInt(input.value, 10);
return value + soma;
}, 0);
$('#cubagemMateriaisTotal').val(total);
});
});