Possuo o seguinte HTML
<legend>Credits</legend>
<div id="credit-after">
<div class="form-group">
<div class="col-md-3">
<div class="form-group">
<label>Amount</label>
<input type="text" class="form-control border-input money disabled-inputs amount-credit" id="credit[0][amount]" name="credit[0][amount]" placeholder="Amount" value="25,000.00">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputEmail1">Date</label>
<input type="date" class="form-control border-input disabled-inputs" id="credit[0][cdate]" name="credit[0][cdate]" placeholder="Date" value="2019-10-09">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="exampleInputEmail1">Details</label>
<input type="text" class="form-control border-input disabled-inputs" id="credit[0][details]" name="credit[0][details]" placeholder="Details of Transaction" value="">
</div>
</div>
<div class="col-md-1" id='credit-transaction-edit'>
<a href="javascript:;" class="remove_field_edit"><i class="fa fa-trash icon-trash"></i></a>
<a href="javascript:;" class="credit-transaction-edit"><i class="fa fa-plus icon-add"></i></a>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control border-input money disabled-inputs amount-credit" id="credit[1][amount]" name="credit[1][amount]" placeholder="Amount" value="20,000.00">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="date" class="form-control border-input disabled-inputs" id="credit[1][cdate]" name="credit[1][cdate]" placeholder="Date" value="2019-10-04">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control border-input disabled-inputs" id="credit[1][details]" name="credit[1][details]" placeholder="Details of Transaction" value="">
</div>
</div>
<div class="col-md-1" id='credit-transaction-edit'>
<a href="javascript:;" class="remove_field_edit"><i class="fa fa-trash icon-trash"></i></a>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control border-input money disabled-inputs amount-credit" id="credit[2][amount]" name="credit[2][amount]" placeholder="Amount" value="10,000.00">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="date" class="form-control border-input disabled-inputs" id="credit[2][cdate]" name="credit[2][cdate]" placeholder="Date" value="2019-10-04">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control border-input disabled-inputs" id="credit[2][details]" name="credit[2][details]" placeholder="Details of Transaction" value="">
</div>
</div>
<div class="col-md-1" id='credit-transaction-edit'>
<a href="javascript:;" class="remove_field_edit"><i class="fa fa-trash icon-trash"></i></a>
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<div class="form-group">
<input type="text" class="form-control border-input money disabled-inputs amount-credit" id="credit[3][amount]" name="credit[3][amount]" placeholder="Amount" value="20,000.00">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<input type="date" class="form-control border-input disabled-inputs" id="credit[3][cdate]" name="credit[3][cdate]" placeholder="Date" value="2019-10-04">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control border-input disabled-inputs" id="credit[3][details]" name="credit[3][details]" placeholder="Details of Transaction" value="">
</div>
</div>
<div class="col-md-1" id='credit-transaction-edit'>
<a href="javascript:;" class="remove_field_edit"><i class="fa fa-trash icon-trash"></i></a>
</div>
</div>
<input type="hidden" id="credit_total_rows" name="credit_total_rows" value="4">
</div>
<div id="amount_total">0.00</div>
Preciso somar todos os valores de todas as linhas. Porém, dinamicamente eu adiciono novas linhas abaixo com este jQuery:
$(document).ready(function() {
$('.money').maskMoney();
var max_fields = 100; //maximum input boxes allowed
var wrapper = $("#credit-after"); //Fields wrapper
var add_button = $(".credit-transaction-edit"); //Add button ID
var total_debit = $("#credit_total_rows").val();
var x = total_debit; //initlal text box count
add_button.click(function(e){ //on add input button click
e.preventDefault();
$(wrapper).append('<div class="note"><div class="col-md-3"><div class="form-group"><input type="text" class="form-control border-input money amount-credit" placeholder="Amount" value="" id="credit['+ x +'][amount]" name="credit['+ x +'][amount]"></div></div><div class="col-md-3"><div class="form-group"><input type="date" class="form-control border-input" placeholder="Date" id="credit['+ x +'][cdate]" name="credit['+ x +'][cdate]"></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control border-input" id="credit['+ x +'][details]" name="credit['+ x +'][details]" placeholder="Details of Transaction"></div></div><div class="col-md-1"><a href="#" class="remove_field_edit"><i class="fa fa-trash icon-trash"></i></a></div></div></div><div>'); //add input box
$('.money').maskMoney();
});
$(wrapper).on("click",".remove_field_credit_edit", function(e){ //user click on remove text
e.preventDefault(); $(this).parent().parent().remove(); x--;
})
});
De que forma eu consigo somar todos os valores e colocar uma div total?
Minha ideia é que ao listar, já abro com autosoma, e posterior ao editar qualquer um dos valores ou ao adicionar nova linha, faça a soma.
function somaCampos()
que faça o trabalho de looping de soma e chama ela dentro das eventos de adicionar ou remover as linhas, assim quando vc adicionar ou excluir ele refaz a soma.