Ajax call works for the first cloning row only, how to make it works for every row

I've the next code snippet for append <option> to the "Unit" drop-down list when I select an item from product drop-down list.

$(document).ready(function() {

        var purchase = $('.purchase-row').last().clone();
        let purchaseCount = 0;
        
        $(document).on('click', '.add_item', function() {
            
            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');
            purchaseCount++;
            console.log('PURCHASE-COUNT: ', purchaseCount);// $(this).parent().slideUp('fast');
                        
            // The next code for reinitialize select2 
            var $example = $(".js-programmatic-init").select2();
            $example.select2();
            
        });

        $(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);

            }
        });

        $(document).on('click', '.purchase-broom', function() {
            $(this).closest('.purchase-row').find('input').val('');
        });


        $(document).on('change', '.product', function(e){
            var id = $(this).val();
            console.log('CHANGED-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('.unit').append('<option>' + values_3[i] + '</option>');
                        }
                    }
        
                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase !!!');
                },
            });
            e.preventDefault();
        });

        
    

Image to illustrate my code

But I've to clone the first row as you can see in the above image and code. I succeeded to isolate "unit input" in the first row from affecting when the user select an item from "product" in the cloned rows, by (Remove the class "product" and the class "unit") as it clears in the above code.

My view to handle ajax

from django.http import JsonResponse

def get_product_unit(request):
    data = {}
    product = request.POST.get('pro-product')
    if product is not None:
        unit = UOM.objects.values('unit__name', 'uom_options', 'unit').filter(product_id=product)
        print('purchase not purchase')
    else:
        unit = []
    
    data['unit'] = [(obj['unit__name']) for obj in unit]
    print(
        'PRODUCT: ', product, 
        'UNIT: ', unit, 
     )

    return JsonResponse(data)

I tried to make a new ajax call for the new cloned row

$(document).on('change', '.newProduct', function(e){
            var id = $(this).val();
            console.log('SUCCESS-CHANGE-PRODUCT-FROM-NEW-CLASS: ', id);
            $.ajax({
                type: 'POST',
                url: '{% url "purchases:get_new_row_unit" %}',
                // dataType: 'json',
                // async: true,
                // cache: false,
                data: {
                    'pro-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('.newUnit').text('');
                    if (values_3.length > 0) {
                        
                        for (var i = 0; i < values_3.length; i++) {
                            // $('#id_pro-unit').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>');
                            $('select').closest('.newUnit').append('<option>' + values_3[i] + '</option>');
                        }
                    }
        
                },
                error: function (){
                    console.log('ERROR with ajax request in Adding Purchase-New Class !!!');
                },
            });
            e.preventDefault();
        });


    });

My view

def get_new_row_unit(request):
    data = {}
    product = request.POST.get('pro-product')
    data['product'] = product
    if product is not None:
        unit = UOM.objects.values('unit__name', 'uom_options', 'unit').filter(product_id=product)
    else:
        unit = []
    
    data['unit'] = [(obj['unit__name']) for obj in unit]
    print(
        'PRODUCT: ', product, 
        'UNIT: ', unit,
     )

    return JsonResponse(data)

Also I tried to do like this Answer But I failed.

[My Problem]

When I select an item from "product" menu in the first cloned row (or from any cloned row) "unit menu" in any cloned row also affected

I knew that I've missed something but I failed to discover it.

Any suggestions .

Back to Top