Why does Bootstrap class have no effect on Cloned elements?

Question

I have a problem where I have a product DIV and in the select of the product name, I have a selectpicker where I can search the name of the product among all existing. But when the user adds another DIV to select another product, the clone() done by the Jquery function brings a select without the function of searching the product name. How can I make this Bootstrap select work in all Divs ?

Select with the search function:

Select of cloned Divs:

index php.:

<div class="container" id="produtos">
                    <div class="separator"></div>

                    <div class="title-padrao">
                        <h1 class="text-center">
                            Produtos
                        </h1>
                    </div>

                    <div id="allProducts">
                        <div class="produtos-wrap" name="produtos-wrap"> <!---- DIV A SER CLONADA / ADICIONADA !---->
                            <div class=" text-center select_height primeira">
                                <b>Item:</b>
                                <br>
                                <input type="text" class="index font-pop input-div" id="index_produto"
                                       name="index_produto[]" value="1" readonly="true">
                            </div>

                            <div class="text-center select_height segunda">
                                <b>ID:</b>
                                <br>
                                <input class="font-pop number_id_produto input-div" value="0" readonly="true"
                                       name="id_produto[]">
                            </div>

                            <div class="select-produto select_height terceira">
                                <b>Selecione um produto:</b>
                                <select class="selectpicker form-control" data-show-subtext="false"
                                        data-live-search="true" name="select_produtos[]" id="select_produtos"
                                        onchange="initProdutos(this)">
                                    <?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 quarta">
                                <b>Embalagem:</b>
                                <br>
                                <input type="text" maxlength="2" class="edit-input font-pop" name="embalagem[]"
                                       value="">
                            </div>

                            <div class="text-center select_height quinta">
                                <b>Preço:</b>
                                <br>
                                <input type="number" id="preco-input" name="preco[]"
                                       oninput="this.value = Math.abs(this.value)" min="0" class="edit-input font-pop"
                                       value="0">
                            </div>

                            <div class="text-center select_height sexta">
                                <b>Quantidade:</b>
                                <br>
                                <input type="number" id="qtd-input" oninput="this.value = Math.abs(this.value)" min="0"
                                       class="edit-input font-pop"
                                       value="0" name="quantidade-produto[]">
                            </div>

                            <div class="text-center select_height text-right setima">
                                <b>Preço do Produto:</b>
                                <br>
                                <input class="font-pop preco-produto input-div" readonly="true" name="preco-produto[]">
                            </div>

                            <div class="text-center select_height oitava" id="div-remove">
                                <button type="button"
                                        class="remover glyphicon glyphicon-remove button-produto"></button>
                            </div>
                        </div>
                    </div>
                    <button type="button" id="add-button" class="glyphicon glyphicon-plus-sign button-produto"></button>
                </div>

Jquery:

$(document).ready(function () {
    var clone = $('#allProducts').html().replace(/<b>.*?<\/b>|<br>/g, "");
    $(document).on('click', '#add-button', addProd);

    $(document).on('click', '.remover', function () {
        $(this).parents('.produtos-wrap').remove();
        ids();
        calculos();
    });

    function addProd() {
        $('#allProducts').append(clone);
        ids();
        $(".produtos-wrap[i]").addClass("p-all");
    }

    function ids() {
        $("[name='index_produto[]']").each(function (i, e) {
            $(e).val(i + 1);
        });
    }
})

The version I’m using of Bootstrap is 3.3.7. Thanks in advance for all the help provided.

Editing the question according to something I found. In "Inspect Element" I realized that the DIV that is the first to click on the document obtains extra elements which are cloned, that is, the effect of select is being loaded on another element and not only in select. Follow the images:

Structure of the DIV "standard":

Structure of cloned Divs: