JSFiddle - React, Tailwind, and code Playground
HTML
<form id="adicionarformProdutos" method"post" action"" enctype="multipart/form-data">
<a href="#" id="adicionarProduto">Adicionar Faixa</a>
<fieldset class="fieldsetProduto">
<legend>Produto 1</legend>
<div class="produtos">
<label for="codProduto1">CĂłdigo:</label><input class="codigoProduto" type="text" id="codProduto1" size="5" name="codProduto[1]" />
<label for="nomeProduto1">Nome:</label> <input type="text" id="nomeProduto1" size="9" disabled name="nomeProduto[1]" />
<label for="qtProduto1">Qt.:</label> <input type="number" min="1" max="999" size="1" id="qtProduto1" name="qtProduto[1]" onblur="calcValor()" />
<label for="valorProduto1">Valor und. R$:</label> <input type="text" id="valorProduto1" disabled name="valorProduto[1]" size="6" onkeypress="mascara(this,float)" />
</div>
</fieldset>
</form>
JavaScript
$(function () {
var i = 1;
$("#adicionarProduto").click(function () {
i++;
novoProduto = $(".fieldsetProduto:first").clone();
novoProduto.find("input").each(function () {
$(this).val("")
});
novoProduto.html(novoProduto.html().replace(/1/g, i));
$("#adicionarformProdutos").append(novoProduto)
});
});
// Para testar no jsFiddle
$.getJSON = function(a,b,c) {
setTimeout(function() {
c({
nomeProduto:"Teste",
valorProduto:42
})
}, 2000);
};
$(document).ready(function(){
$(document).on("blur", ".codigoProduto", function(){
var parent = $(this).parent();
var nomeProduto = parent.children("input:eq(1)");
var qtProduto = parent.children("input:eq(2)");
var valorProduto = parent.children("input:eq(3)");
$( nomeProduto ).val('Carregando...');
$( qtProduto ).val('Carregando...');
$( valorProduto ).val('Carregando...');
$.getJSON(
'function.php',
{ codProduto: $( this ).val() },
function( json )
{
$( nomeProduto ).val( json.nomeProduto );
$( qtProduto ).val("1");
$( valorProduto ).val( json.valorProduto);
}
);
});
});