Calculate duplicate input value

Question

I have a div with 3 inputs (value, aliquot, total value) they are inside a clone div in jquery... I can calculate through id as in the code below, but since it is cloned in jquery only works in the main div because it cannot have duplicate id..

I thought I’d take the input by name, but I haven’t been able to yet...

Note that by clicking "CLONE" the div it only works in the original div, not in the cloned..

//Função que calcula os Inputs pelo ID
function Calc(){

ValorUm = parseFloat(document.getElementById('valor').value);
ValorDois = parseFloat(document.getElementById('aliquota').value);
  
document.getElementById('valortotal').value = (ValorUm*ValorDois/100).toFixed(2);
}
//Função clone
  $(document).ready(function() {
    var linha = $(".engloba:first").clone();
    $("#mais").click(function() {
        $("#conteudo_engloba").append(linha.clone());
    });
 });

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<form>
    <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
	<div class="engloba">
		<h1>Conteudo</h1>
		
		Valor <input type="text" id="valor">
		Aliquota <input type="text" id="aliquota" onblur="Calc()">
		Valor Total <input type="text" id="valortotal">
				
	</div>
</div>

Answer 1

Below is the solution of your problem with my considerations:

$(document).ready(function() {
  clonar();	
  $("#mais").on("click", clonar);
});

function calcularValorTotal() {
  var $aliquota = $(this);
  var $valor = $($aliquota.prev());

  var valor = parseFloat($valor.val());
  var aliquota = parseFloat($aliquota.val());

  var valorTotal = (valor*aliquota/100).toFixed(2);

  var $valorTotal = $($aliquota.next());
  $valorTotal.val(valorTotal);
};

function clonar() {
  var linha = $("#engloba-template > .engloba").clone();

  $(linha).find(".aliquota").on("blur", calcularValorTotal);

  $("#conteudo_engloba").append(linha);
};

#engloba-template {
  display: none;  
}

<form>
  <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
</div>

<div id="engloba-template">
  <div class="engloba">
    <h1>Conteudo</h1>

    Valor <input type="text" class="valor">
    Aliquota <input type="text" class="aliquota">
    Valor Total <input type="text" class="valortotal">

  </div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

1. To work with cloning you will need to stop using id’s and start using classes.
2. It’s better you create templates and keep them hidden, than you use the HTML in use on the screen to make your cloning. In addition to being a good practice, it is clearer to visualize the responsibility of each element.

In HTML I passed the div template .engloba for a hidden template display: none; and changed the id of input for class.

In JS I started to use only jQuery, besides separating the methods in functions and improving their nomenclatures.

Answer 2

With javascript you can get the previous element and the next element of a given node using previousSibling and nextElementSibling:

function Calc(elemento) {
  var anterior = elemento.previousSibling;
  var ValorUm = parseFloat(anterior.previousSibling.value);
  var ValorDois = parseFloat(elemento.value);
  elemento.nextElementSibling.value = (ValorUm * ValorDois / 100).toFixed(2);
}
//Função clone
$(document).ready(function() {
  var linha = $(".engloba:first").clone();
  $("#mais").click(function() {
    $("#conteudo_engloba").append(linha.clone());
  });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

<form>
  <input type="button" name="" value="CLONAR" id="mais">
</form>

<div id="conteudo_engloba">
  <div class="engloba">
    <h1>Conteudo</h1>
    Valor
    <input type="text">Aliquota
    <input type="text" onblur="Calc(this)">Valor Total
    <input type="text">

  </div>
</div>