cloning_div

<div class="wrapper">
    <!-- INPUTS -->
    <div class="row purchase-row">

        <div class="col-lg-4">
            <div class="form-group">

                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <i class="fas fa-dolly"></i>
                        </span>
                    </div>

                    <select class="form-control product select2 js-programmatic-init" name="pro-product" id="id_pro-product">
                        <option value="0" selected disabled>--- Product Name ---</option>
                        {% for obj in products %}
                            <option value="{{obj.id}}">{{obj.name}}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </div>

        <div class="col-lg-1">
            <div class="form-group ">
                <div class="input-group">
                    <select class="form-control unit" name="pro-unit" id="id_pro-unit">
                        <option disabled selected>---Unit---</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="col-lg-1">
            <div class="form-group ">
                <div class="input-group">
                    {% render_field pro_form.quantity class="form-control quantity" %}
                </div>

            </div>
        </div>

        <div class="col-lg-1">
            <div class="form-group ">
                <div class="input-group">
                    {% render_field pro_form.last_price class="form-control last-price" %}
                </div>

            </div>
        </div>

        <div class="col-lg-1">
            <div class="form-group ">
                <div class="input-group">
                    {% render_field pro_form.purchasing_price class="form-control purchasing-price" %}
                </div>
            </div>
        </div>

        <div class="col-lg-1">
            <div class="form-group ">
                <div class="input-group">
                    {% render_field pro_form.total class="form-control total" %}
                </div>
            </div>
        </div>

        <!-- BUTTONS -->
        <div class="col-lg-1">
            <div class="control ">
                <button
                    type="button"
                    id="clone_vendor"
                    class="btn btn-outline-danger purchase-minus remove_item btn-block"
                    style="margin-bottom: 20px;"
                >
                    <span class="fas fa-times"></span>
                </button>
            </div>
        </div>

        <div class="col-lg-1">
            <div class="control ">
                <button
                    type="button"
                    id=""
                    class="btn btn-outline-secondary purchase-broom btn-block"
                    style="margin-bottom: 20px;"
                >
                    <span class="fas fa-broom"></span>
                </button>
            </div>
        </div>

        <div class="col-lg-1">
            <div class="control ">
                <button
                    type="button"
                    id=""
                    class="btn btn-outline-info purchase-eye btn-block"
                    style="margin-bottom: 20px;"
                >
                    <span class="fas fa-eye"></span>
                </button>
            </div>
        </div>

    </div>
    <!-- ./ROW -->

    <div class="row">

        <div class="col-lg-4">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Product </label>
        </div>

        <div class="col-lg-1">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Unit </label>
        </div>

        <div class="col-lg-1">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Quantity </label>
        </div>

        <div class="col-lg-1">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Last Pr </label>
        </div>

        <div class="col-lg-1">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Price </label>
        </div>

        <div class="col-lg-1">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">Total</label>
        </div>

        <div class="col-lg-3">
            <label class="btn bg-gradient-lightblue btn-block btn-sm">
                Tools
            </label>
        </div>

    </div>
    <br>

    <button
        type="button"
        id="clone_purchase_product"
        class="btn btn-outline-primary purchase-plus add_item"
        style="margin-bottom: 20px;">
        <span class="fas fa-caret-down"></span>
    </button>
    <!-- ADDING BUTTON -->
    <!-- <div class="row add-row">
        <div class="col-sm-1">
            <div class="control ">
                <button
                    type="button"
                    id="clone_purchase_product"
                    class="btn btn-outline-primary purchase-plus add_item"
                    style="margin-bottom: 20px;"
                >
                    <span class="fas fa-caret-down"></span>
                </button>
            </div>
        </div>
    </div> -->

</div>

### js.html file

<script>
    $(document).ready(function() {

        var purchase = $('.purchase-row').last().clone();
        let purchaseCount = 0;

        $(document).on('click', '.add_item', function() {
            // $(".select2").select2();
            var clone = purchase.clone(); //.prop('id', 'product_' + purchaseCount);
            // var clone = purchase.clone().prop('class', 'product_' + purchaseCount);
            console.log('clone: ', clone);
            $(this).prevAll('.purchase-row').first().after(clone.hide());
            clone.slideDown('fast');

            // $('#product_'+ purchaseCount).find('#id_pro-product').removeClass('product').addClass('newProduct');
            // $('#product_'+  purchaseCount).find('#id_pro-unit').removeClass('unit').addClass('newUnit');
            $('.purchase-row').find('#id_pro-product').removeClass('product').addClass('newProduct');
            $('.purchase-row').find('#id_pro-unit').removeClass('unit').addClass('newUnit');

            $('.purchase-row').find('#id_pro-product').addClass('product_'+ purchaseCount);
            $('.purchase-row').find('#id_pro-unit').addClass('unit_'+ purchaseCount);
            // Bind an event
            // $('.newProduct').on('select2:select', function (e) {
            //     console.log('select event');
            // });
            // The next code for reinitialize select2
            // var $example = $(".js-programmatic-init").select2();
            var $example = $(".newProduct").select2();
            $example.select2();

            // ($(".newProduct").select2().select2());
            // $(".js-programmatic-init").select2();
            // $('.purchase-row').find('.product').addClass('newProduct');
            // $('.purchase-row').find('.unit').addClass('newUnit');
            purchaseCount++;
            console.log('PURCHASE-COUNT: ', purchaseCount);// $(this).parent().slideUp('fast');

        });

        $(document).on('click', '.purchase-minus', function() {
            if (purchaseCount == 0) {
                // Do nothing.
                alert('You can not delete this row' );
            } else {
                $(this).closest('.purchase-row').remove();
                purchaseCount--;
                console.log('PURCHASE-COUNT2: ', purchaseCount);// $(this).parent().slideUp('fast');2

            }
        });

        $(document).on('click', '.purchase-broom', function() {
            // $(this).closest('.purchase-row').find('select').val(0);
            $(this).closest('.newProduct').select2('destroy');
            $(this).closest('.purchase-row').find('select')[0].selectedIndex=0;
            // $(this).closest('.purchase-row').find('input').val('');

        });


        $(document).on('change', '.product', function(e){
            var product_id = $(this).val();
            console.log('SUCCESS-CHANGE-PRODUCT: ', product_id);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_product_unit" %}',
                // dataType: 'json',
                // async: true,
                // cache: false,
                data: {
                    'pro-product': $('.purchase-row select').closest('.product').val(), // this is right
                    // find('#id_pro-product')
                },
                success: function (data) {
                    console.log(
                        'FROM SUCCESS: ', data['unit'],
                    );
                    var values_3 = data['unit'];
                    // $('#id_pro-unit').text('');
                    // $('select').closest('.unit').find('select').text('');
                    $('select').closest('.unit').text('');
                    if (values_3.length > 0) {

                        for (var i = 0; i < values_3.length; i++) {
                            // $('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
                            $('select').closest('#id_pro-unit').append('<option>' + values_3[i] + '</option>');
                        }
                    }

                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase !!!');
                },
            });
            e.preventDefault();
        });

        $(document).on('change', '.newProduct', function(e){
            var product_id = $(this).val();
            var $this = $(this);
            // $('select').find('#id_pro-product').addClass('product_'+ product_id + '_' + purchaseCount);
            // $('select').find('#id_pro-unit').addClass('unit_'+ product_id + '_' + purchaseCount);
            console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', product_id);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_new_row_unit" %}',
                // dataType: 'json',
                // async: true,
                // cache: false,
                data: {
                    'pro-product': product_id,
                    // $('#product_'+purchaseCount).closest('.newProduct select').val(),
                    // find('#id_pro-product')
                },
                success: function (data) {
                    console.log(
                        'FROM SUCCESS-NEW-CLASS: ', data['unit'],
                        'PRODUCT-FROM-NEW-CLASS: ', data['product'],
                    );
                    var values_3 = data['unit'];
                    // $('#id_pro-unit').text('');
                    $('select').closest('.unit_'+purchaseCount).text('');
                    if (values_3.length > 0) {

                        for (var i = 0; i < values_3.length; i++) {
                            $('.purchase-row select').closest('.unit_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
                            // $('.newUnit select').closest('#product_'+ purchaseCount).append('<option>' + values_3[i] + '</option>');
                            // $('select').closest('#product_'+ purchaseCount).find('.newUnit').append('<option>' + values_3[i] + '</option>');
                            // $('.newUnit select').closest('.unit_'+purchaseCount).append('<option>' + values_3[i] + '</option>');
                        }
                    }

                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
                },
            });
            e.preventDefault();
        });


    });

</script>