Вызов Ajax работает только для первой строки клонирования, как сделать так, чтобы он работал для каждой строки

У меня есть следующий фрагмент кода для добавления <option> в раскрывающийся список "Единица", когда я выбираю элемент из раскрывающегося списка продуктов.

Изображение для иллюстрации моего кода

Но я должен клонировать первый ряд, как вы можете видеть на приведенном выше изображении и коде. Мне удалось изолировать "unit input" в первом ряду от влияния, когда пользователь выбирает товар из "product" в клонированных рядах, путем ( Удалите класс "product" и класс "unit"), как показано в приведенном выше коде.

Мое представление для обработки 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)

Я попытался сделать новый вызов ajax для новой клонированной строки

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


    });

Мое мнение

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)

Также я пытался сделать вот так Ответ. Но у меня ничего не получилось.

[Моя проблема]

Когда я выбираю элемент из меню "продукт" в первой клонированной строке (или из любой клонированной строки) "меню единиц" в любом клонированном ряду также затрагивается

Я знал, что что-то упустил, но не смог это обнаружить.

Любые предложения .

Вернуться на верх