Bom dia pessoal,
Estou precisando implementar em um projeto uma função em minha aba de Produtos, onde preciso adicionar(clonar) e remover as DIVs e fazendo o incremento do número dessas de maneira dinâmica através dos botões "Remover" e "Add" com JQuery. Preciso clonar a " div class='produtos-wrap'> " e fazer com que o número na DIV " div id='index'> " seja incrementado ou decrementado. Minha ideia inicial era que a pagina já abra com 3 dessas div e o usuário tenha a opção de adicionar ou remove-las, de acordo com sua necessidade.
Agradeço desde já a qualquer ajuda fornecida.
Meu código HTML:
<div class="container" id="produtos">
<div class="separator"></div>
<div class="title-padrao">
<h1 class="text-center">Produtos</h1>
</div>
<div class="produtos-wrap">
<div class=" text-center select_height">
<b>Número:</b>
<div id="index" class="font-pop">1</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="select_produtos" onchange="initProdutos()">
<?php
foreach ($result2 as $item_fornecedores) {
echo '<option data-subtext="' . $item_fornecedores['desc_produto'] . '" value="'
. $item_fornecedores['desc_produto'] . '">' . $item_fornecedores['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" name="embalagem" value="">
</div>
<div class="text-center select_height">
<b>Preço:</b>
<br>
<input type="text" maxlength="5" id="preco" name="preco" 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" name="quantidade-produto">
</div>
<div class="text-center select_height">
<b>Preço do Produto:</b>
<div id="preco-produto" class="font-pop">1</div>
</div>
<div class="text-center select_height">
<a href="" id="remover">X</a>
</div>
</div>
<button id="add">+</button>
</div>