Como não tenho conhecimento de javascript preciso de uma ajuda de como posso fazer, esse meu script abaixo realizar o somatório dos itens dos campos "valor" de cada linha em loop
No caso teria que no campo "Total" aparecer dinamicamente o somatório de cada linha
(function ($) {
$('#destino_in').on('change', function () {
var $self = $(this);
$('#destino_out').val($self.val());
});
}(jQuery));
$(function () {
var divContent = $('#materialInst');
var botaoAdicionar = $('a[data-id="1"]');
var i = 1;
// VARIAVEL ADD
var destino;
//Ao clicar em adicionar ele cria uma linha com novos campos
$(botaoAdicionar).click(function () {
$('<div class="conteudoIndividual"><tr><td>'+
'<input type="text" name="estado" size="5" class="form-control" value="" />'+
'<select name="destino_in" id="destino_in" class="destino_in form-control">'+
'<option value="" selected disabled>Selecione...</option>'+
'<option value="Vilamar-10,00">Vilamar</option>'+
'<option value="Savoy-20,00">Savoy</option>'+
'</select>'+
'<input type="text" placeholder="Valor" name"valor" id="valor" class="form-control" />'+
'<input type="text" size="5" name="numero" class="form-control" value="" />'+
'<a href="#" class="linkRemover">Remover</a></td></tr></div>').appendTo(divContent);
$('#removehidden').remove();
i++;
$('<input type="hidden" name="quantidadeCampos" value="' + i + '" id="removehidden">').appendTo(divContent);
// ADD AQUI
// Aqui acontece a inserção dos valores no outro input
destino = $('.destino_in');
// verifico no evento de change
destino.on('change', function() {
// quando ocorrer, capturo o valor selecionado
var selected = $(this).val();
// divido a string em 2, separada pelo (-) [nome(-)valor]
var res = selected.split("-", 2);
// res[0] = "Vilamar";
// res[1] = "10,00";
// adiciono no input #valor o resultado do array na posição 1
$(this).next().val(res[1]);
});
// FIM ADD
});
//Cliquando em remover a linha é eliminada
$('#materialInst').on('click', '.linkRemover', function () {
$(this).parents('.conteudoIndividual').remove();
i--;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="adicionar" data-id="1">Adcionar nova Linha</a>
<form id="form1" name="form1" action="src/acao/cli.php" method="POST" enctype = "multipart/form-data" >
<table>
<div id="materialInst">
</div>
<input type="text" name="total" placeholder="Total"> <-- aqui devera aparecer o somatório
</form>
</table>
<input>
gerado dinamicamente para o valor tem oid="valor"
que está errado pois irá forçar com que vários elementos na página tenham o mesmoid
. O mesmo se aplica a todos osids
que está a utilizar na linha gerada.