JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-maskmoney/3.0.2/jquery.maskMoney.min.js"></script>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field linha">
<input id="quantidade" class="quantidade" type="number" name="quantidade[]" value="1">
<input id="demo[1]" type="text" class="custo" name="custo[]">
<button type="button" class="remove-field btn btn-danger">
Excluir
</button>
<br>
</div>
</div>
</div>
<button type="button" class="add-field btn btn-primary m-l-20">
Adicionar Campos
</button>
<div class="title">Total do Atendimento</div>
<span class="amount" count-to-currency="1123.99" value="0" duration="2">
R$ <span id="valor">0,00</span>
</span>
JavaScript
$('.multi-field-wrapper').each(function() {
//var max_fields = 10; //maximum input boxes allowed
var wrapper = $('.multi-fields', this); //Fields wrapper
var add_button = $(".add-field"); //Add button ID
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
$('.multi-field:first-child', wrapper).clone(true).appendTo(wrapper).find('input').val('').focus();
//re-init mask money to apply new added input
initMaskMoney();
});
$('.multi-field .remove-field', wrapper).click(function() {
if ($('.multi-field', wrapper).length > 1){
$(this).parent('.multi-field').remove();
somarValores();
}
});
});
initMaskMoney();
function initMaskMoney() {
$('input[id^="demo"]').maskMoney({thousands:'', decimal:','});
}
$('.custo,.quantidade').on('change', function() {
somarValores();
});
function somarValores() {
var amount_sum = 0;
//calculate total worth of money
$('.linha').each(function(){;
var custo = $(this).find(".custo").val();
var custoConvertido = parseFloat(custo.replace(",", "."));
var quantidade = $(this).find(".quantidade").val();
var total = custoConvertido * quantidade
if (total > 0){
amount_sum += parseFloat(total);
sum = amount_sum.toFixed(2).toString().replace(/\./g, ',');
console.log(amount_sum);
console.log(sum);
}else{
sum = "0,00";
}
});
$('#valor').html(sum);
}