Bom dia pessoal, estou enfrentando um problema e gostaria de saber se alguém consegue me ajudar. Desenvolvi um código para adicionar e remover DIVs de forma dinâmica e com autoincremento e decremento do index. O problema ocorre onde o incremento do DIV começa em "1" mas não passa do "2" e, além disso, a primeira DIV padrão, ao adicionar outra, é inutilizada, não consigo mais alterar as informações da mesma. Outro problema ocorre na ação de adicionar outras DIVs, fazendo com que as informações escolhidas nas DIVs anteriores sejam resetadas. A minha função de Remove, sempre que eu remover alguma DIV, sua DIV seguinte deve tomar seu número, fazendo o decremento, o que não está acontecendo. Alguém consegue me dar uma luz ?
index.php:
<div id="allProducts" name="allProducts">
<div class="produtos-wrap" id="wrap-produtos-1" name="wrap-produtos-1"> <!---- DIV A SER CLONADA / ADICIONADA !---->
<div class=" text-center select_height">
<b>Número:</b>
<div id="index" class="font-pop">1</div>
</div>
<div class="text-center select_height">
<b>ID:</b>
<div id="number_id_produto-1" class="font-pop"></div>
</div>
<div class=" select_height" id="div_produtos">
<b>Produto:</b>
<select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-1" id="select_produtos-1" onchange="initProdutos(1);">
<?php
foreach ($result2 as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
. $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
}
?>
</select>
</div>
<div class="text-center select_height">
<b>Embalagem:</b>
<br>
<input type="text" maxlength="2" class="edit-input font-pop" id="embalagem-1" name="embalagem-1" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" id="preco-1" name="preco-1" class="edit-input font-pop">
</div>
<div class="text-center select_height">
<b>Quantidade:</b>
<br>
<input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-1" name="quantidade-produto-1">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div id="preco-produto-1" name="preco-produto-1" class="font-pop"></div>
</div>
<div class="text-center select_height">
<button id="remove-1" name="remove-1" class="remover">X</button>
</div>
</div>
</div>
<button id="add-button" onclick="">+</button>
elements.php:
<?php
error_reporting(0);
$id = $_GET['id'];
header('Content-Type: text/html; charset=utf-8');
# Coloquei o charset no começo, é melhor que a página toda obedece ele se estiver aqui, e mudei pra utf-8 pra funcionar os caracteres especiais
$servidor = 'localhost';
$usuario = 'root';
$senha = '';
$dbname = 'testevip';
$connect = mysqli_connect($servidor, $usuario, $senha, $dbname);
$query_produtos = "SELECT * FROM produto ORDER BY desc_produto ASC";
$result2 = mysqli_fetch_all(mysqli_query($connect, $query_produtos), MYSQLI_ASSOC);
mysqli_close($connect);
?>
<div class="produtos-wrap" id="wrap-produtos-<?=$id?>" name="wrap-produtos-<?=$id?>">
<div class=" text-center select_height">
<b>Número:</b>
<div id="index" class="font-pop"><?=$id?></div>
</div>
<div class="text-center select_height">
<b>ID:</b>
<div id="number_id_produto-<?=$id?>" class="font-pop"></div>
</div>
<div class=" select_height" id="div_produtos">
<b>Produto:</b>
<select class="selectpicker form-control" data-show-subtext="false" data-live-search="true" name="select_produtos-<?=$id?>" id="select_produtos-<?=$id?>" onchange="initProdutos(<?=$id?>);">
<?php
foreach ($result2 as $item_produtos) {
echo '<option data-subtext="' . $item_produtos['desc_produto'] . '" value="'
. $item_produtos['desc_produto'] . '">' . $item_produtos['desc_produto'] . '</option>';
}
?>
</select>
</div>
<div class="text-center select_height">
<b>Embalagem:</b>
<br>
<input type="text" maxlength="2" class="edit-input font-pop" id="embalagem-<?=$id?>" name="embalagem-<?=$id?>" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" id="preco-<?=$id?>" name="preco-<?=$id?>" class="edit-input font-pop">
</div>
<div class="text-center select_height">
<b>Quantidade:</b>
<br>
<input type="text" maxlength="3" class="edit-input font-pop" value="0" id="quantidade-produto-<?=$id?>" name="quantidade-produto-<?=$id?>">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div id="preco-produto-<?=$id?>" name="preco-produto-<?=$id?>" class="font-pop"></div>
</div>
<div class="text-center select_height">
<button id="remove-<?=$id?>" name="remove-<?=$id?>" class="remover" >X</button>
</div>
</div>
JQuery:
function initProdutos(product_id) {
var product = ((product_id === undefined) ? 1 : product_id);
var letras_produtos = $("#select_produtos-" + product).val()
const $preco = $("#preco-" + product);
const $qtd = $("#quantidade-produto-" + product);
const $total = $("#preco-produto-" + product);
function recalculate() {
const total = Number($preco.val() || 0) * Number($qtd.val() || 0);
$total.text("R$ " + total);
}
$.ajax({
type: "GET",
url: "API.php",
data: {
"mode": "produtos", letras_produtos
},
dataType: "JSON",
//CASO DÊ TUDO CERTO
success: function(data) {
console.log(data);
$('#embalagem-' + product).val(data[0]['embalagem']);
$('#number_id_produto-' + product).text(data[0]['id_produto']);
$preco.val(data[0]['preco_base']);
recalculate();
},
error: function(request, error) {
console.log("Request: " + JSON.stringify(request));;
}
});
$preco.on('input', recalculate);
$qtd.on('input', recalculate);
recalculate();
};
var index = 1;
$(function () {
var id = index + 1;
$.ajax({
type: "GET",
url: "elements.php?id=" + id,
//CASO DÊ TUDO CERTO
success:function(data){
$(document).on('click', '#add-button', function () {
const div = document.getElementById('allProducts');
div.innerHTML += data;
index = id;
})
$(document).on('click', '.remover', function () {
$(this).parents('.produtos-wrap').remove();
index = id - 1;
})
},
error:function(request, error)
{
console.log(error);
// console.log("Request: " + JSON.stringify(request));
}
});
})
Por fim um print de como está no navegador: https://prnt.sc/o0i6fw