Bom dia pessoal, estou com um problema onde já fiz algo parecido em outras funções do meu sistema mas nessa em específico não está funcionando. Tenho uma função que adiciona e remove DIVs de produtos em meu sistema e nestas contem um SELECT que trás os nomes dos Produtos, quando o produto é escolhido é populado também seu Código, sua Embalagem e a quantidade de sua Embalagem. O problema está sendo que cada SELECT ao ser escolhido deve popular os dados em sua DIV e está ocorrendo que está populando em todas dos outros produtos. Como posso percorrer e apenas popular nos campos corretos ?
principal.php // Estrutura da DIV Produtos:
<div class="container" id="produtos">
<div class="separator"></div>
<div class="title-padrao">
<h1 class="text-center">
Produtos
</h1>
</div>
<div id="allProducts">
<section id="all-section">
<div class="inform-produtos">
<div class="primeira">
<b>Item:</b>
</div>
<div class="segunda">
<b>Cod.:</b>
</div>
<div class="terceira">
<b>Selecione um produto:</b>
</div>
<div class="quantidade-embalagem">
<b>Qtd. Embalagem:</b>
</div>
<div class="quarta">
<b>Embalagem:</b>
</div>
<div class="quinta">
<b>Preço:</b>
</div>
<div class="sexta">
<b>Quantidade:</b>
</div>
<div class="setima">
<b>Preço Produto:</b>
</div>
</div>
<div class="clone-prod" name="clone-prod[]">
<div class="wrap-prod" name="wrap-prod[]">
<div class="produtos-wrap" name="produtos-wrap[]">
<div class="text-center select_height produto-padrao" id="primeiro-produto">
<input type="text" class="index font-pop input-div" id="index_produto"
name="index_produto[]" value="1" readonly="true" required>
</div>
<div class="text-center select_height produto-padrao" id="segundo-produto">
<input class="font-pop number_id_produto input-div" value=""
readonly="true" name="id_produto[]" required>
</div>
<div class="text-center select_height produto-padrao terceiro-produto"
id="terceiro-produto" name="terceiro-produto[]">
<select class="selectpicker form-control" data-show-subtext="false"
data-live-search="true" name="select_produtos[]"
id="select_produtos" onchange="initProdutos(this)" required>
<?php
echo '<option disabled selected hidden
value="Selecione um produto..."
data-subtext="Selecione um produto...">Selecione um produto...
</option>';
foreach ($res as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['CODACESSO'] . '" value="'
. $item_produtos['CODACESSO'] . "|" . $item_produtos['EMBALAGEM'] . "|"
. $item_produtos['QTDEMBALAGEM'] . '">' . $item_produtos['DESCCOMPLETA'] . '</option>';
}
?>
</select>
</div>
<div class="text-center select_height produto-padrao" id="quantidade-embalagem">
<input type="text" class="edit-input font-pop"
name="qtdembalagem[]" value="" required>
</div>
<div class="text-center select_height produto-padrao" id="quarto-produto">
<input type="text" maxlength="2" class="edit-input font-pop"
name="embalagem[]" value="" required>
</div>
<div class="text-center select_height produto-padrao" id="quinto-produto">
<input type="number" id="preco-input" name="preco[]" step="0.01" min="0"
class="edit-input font-pop" required>
</div>
<div class="text-center select_height produto-padrao" id="sexto-produto">
<input type="number" id="qtd-input" step="0.01" min="0"
class="edit-input font-pop" value="" name="quantidade-produto[]"
required>
</div>
<div class="text-center select_height produto-padrao" id="setimo-produto">
<input class="font-pop preco-produto input-div" readonly="true"
name="preco-produto[]" required>
</div>
</div>
<div class="text-center select_height produto-padrao oitavo-produto"
id="div-remove">
<button type="button"
class="remover glyphicon glyphicon-remove button-produto"></button>
</div>
</div>
</div>
</section>
<div id="wrap-addbutton">
<button type="button" id="add-button"
class="glyphicon glyphicon-plus-sign button-produto"></button>
<b>Adicione um produto...</b>
</div>
</div>
</div>
Function que adiciona / remove Produtos:
$(document).ready(function () {
var clone = $(".clone-prod").html();
$(document).on('click', '#add-button', addProd);
$(document).on('click', '.remover', function () {
if ($('.wrap-prod').length === 1) {
$('.remover').attr('disabled', true);
alert('Não é possivel remover o único produto do Pedido !');
} else {
$(this).parents('.wrap-prod').remove();
ids();
calculos();
}
});
function addProd() {
$('.clone-prod').append(clone);
ids();
$('.clone-prod .selectpicker').selectpicker();
$('.remover').attr('disabled', false);
}
function ids() {
$("[name='index_produto[]']").each(function (i, e) {
$(e).val(i + 1);
});
}
})
Function que capturo o valor / populo os dados do Produto:
var prod = [];
function initProdutos(e) {
var wraper = $(e).closest(".produtos-wrap"); // pega a div principal
var letras_produtos = $("[name='select_produtos[]']", wraper).val();
const $preco = $("[name='preco[]']", wraper);
const $qtd = $("[name='quantidade-produto[]']", wraper);
$.ajax({
type: "GET",
url: "API.php",
data: {
"mode": "produtos",
"letras_produtos": letras_produtos
},
dataType: "JSON",
//CASO DÊ TUDO CERTO
success: function (data) {
prod = [];
var len = data.length;
for (var i = 0; i < len; i++) {
prod.push(data[i]['CODACESSO'] + "|" + data[i]['EMBALAGEM'] + "|" + data[i]['QTDEMBALAGEM']);
}
},
error: function (request, error) {
//console.log("Request: " + JSON.stringify(request));
}
});
$preco.on('input', recalculate());
$qtd.on('input', recalculate());
}
$(document).on("change", "[name='select_produtos[]']", function () {
setValue(this.value);
});
function setValue(valor) {
var tmp = valor.split("|");
var wraper = $("[name='select_produtos[]']").closest(".produtos-wrap");
$('[name="id_produto[]"]', wraper).val(tmp[0]);
$('[name="embalagem[]"]', wraper).val(tmp[1]);
$('[name="qtdembalagem[]"]', wraper).val(tmp[2]);
}