Clone and delete DIV

Question

Good morning, everyone,

I need to implement in a project a function in my Products tab, where I need to add (clone) and remove the Divs and increment the number of these dynamically through the "Remove" and "Add" buttons with Jquery. I need to clone the " div class='products-wrap'> " and make the number in the DIV " div id='index'> " incremented or decreasing. My initial idea was that the page already opens with 3 of these div and the user has the option to add or remove them, according to their need.

Thanks in advance for any help provided.

My HTML code:

<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>

Answer 1

As I said, you can try using the clone.

$(document).ready(function(){
        $("#id_button").click(function(){
            $("#id_div_que_deseja_clonar").clone().appendTo("body");
        });
});

Answer 2

With Jquery I used append and remove it. I advise using a remove button instead of (a href="" id="remove")

  $(document).ready(function(){
     $("remover").click(function(){
         $("#id_do_elemento_que_deseja_remover").remove();
     });
     $("#add").click(function(){
         $("#produtos").append("<div><p>aqui você cria os seus elementos</p></div>");
     });
});