JSFiddle - React, Tailwind, and code Playground
HTML
<div id="formularioMateriais">
<div class="row">
<div class="col-xs-1">
<div class="form-group" style="margin:0 0 0 1px;">
<label class="control-label">Volume</label>
<input name="volumeMaterial[]" id="" type="number" class="form-control volumeMaterial" value="" required>
</div>
</div>
<div class="col-xs-4">
<div class="form-group" style="margin:0 0 0 1px;">
<label class="control-label">Material</label>
<input name="nomeMaterial[]" id="" type="text" class="form-control nomeMaterial" value="" required>
</div>
</div>
<div class="col-xs-2">
<div class="form-group" style="margin:0 0 0 1px;">
<label class="control-label">Compimento</label>
<input name="comprimentoMaterial[]" id="" type="text" class="form-control comprimentoMaterial" value="" required>
</div>
</div>
<div class="col-xs-2">
<div class="form-group" style="margin:0 0 0 1px;">
<label class="control-label">Largura</label>
<input name="larguraMaterial[]" id="" type="text" class="form-control larguraMaterial" value="" required>
</div>
</div>
<div class="col-xs-2">
<div class="form-group" style="margin:0 0 0 1px;">
<label class="control-label">Altura</label>
<input name="alturaMaterial[]" id="" type="text" class="form-control alturaMaterial" value="" required>
</div>
</div>
<div class="col-xs-1">
<div class="form-group"> <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>
</div>
<input name="cubagemMateriais[]" id="cubagemMateriais" type="text">
</div>
<hr>
</div>
</div>Soma total
<input...
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 () {
$('#formularioMateriais').on('keyup', 'input', function (e) {
var $row = $(e.target).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) || 0;
return value + soma;
}, 0);
$('#cubagemMateriaisTotal').val(total);
});
});