Jquery на событие изменения не обновляет ожидаемый ввод

Question

У меня есть событие обслуживания, в котором может быть 0 или n товаров. В моем событии Create Maintenance у меня есть кнопка, которая добавляет продукты, используя расширение EditorForMany. Для каждого продукта есть список выбора, чтобы выбрать продукт. Я хочу иметь поле только для чтения для выбранного продукта под названием Единицы. Единицы измерения определяются для каждого продукта в базе данных как «mt» или «mm», «number».

Каждый раз, когда я выбираю продукт, он должен обновлять показания единиц измерения из базы данных, НО вместо этого он пытается обновить единицы первого продукта.

Я делаю что-то не так с Селекторами (наверное). Но я действительно не могу это понять.

На мой взгляд

@model Models.Maintanance.AddMaintananceVM
<form asp-action="BakimIsle" autocomplete="off">
<label asp-for="Date" class="control-label"></label>
            <div class="input-group">
                <input asp-for="Date" type="text" class="form-control" >
                <div class="input-group-append">
                    <span class="input-group-text"><i class="ion-calendar"></i></span>
                </div>
            </div>
 <div id="parts-list">
    @Html.EditorForMany(x => x.Parts, x => x.Index, false)
</div>
<input type="button" id="add-part" class="btn btn-outline-primary waves-effect waves-light btn-sm" value="Add" />
<button type="submit" class="btn btn-primary">Kaydet</button>

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

        $('#add-part').on('click', function () {
            jQuery.get('@Url.Action("AddPart")').done(function (html) {
                $('#parts-list').append(html);

            });
        });

        $("#parts-list").on('change',"#Product", function () {
            LoadProductsData($("#Product option:selected").val());
        });

        $(document).on('click', '.delete', function () {
            $(this).closest('.partRow').remove();
        });

    });
</script>

Я считаю, что моя проблема здесь ... Функция с именем LoadProductsData работает и получает правильные данные от контроллера, но пытается обновить ТОЛЬКО первый введенный модуль продукта.

<script>
    function LoadProductsData(id) {
        $('#Unit').val('');
        $.ajax({
            type: "GET",
            url: "@Url.Action("LoadProductById")",
            datatype: "Json",
            data: { productId: id },
            success: function (data) {
                $.each(data, function (index, value) {
                    $("#Unit").val(value.units);

                });

            }
        });
    }
</script>

Просмотр для EditorForMany

@model Models.Maintanance.PartVM

<div class="partRow">
<div class="card-box">
    <div class="row">
        <div class="col-md-2">
            <label asp-for="PartId" class="control-label"></label>
            <select asp-for="PartId" asp-items="Model.AllParts" id="Product" 
class="form-control">
                <option value="">Parça seç</option>
            </select>
        </div>
        <div class="col-md-2">
            <label asp-for="AmountOfPart" class="control-label"></label>
            <input asp-for="AmountOfPart" class="form-control" />
        </div>
        <div class="col-md-2">
            <label asp-for="Units" class="control-label"></label>
            <input asp-for="Units" class="form-control" id="Unit" readonly 
/>
        </div>
        <div class="col-md-2">
            <input type="button" class="btn btn-outline-primary waves-effect 
waves-light btn-sm delete" value="Sil" style="align-items:baseline" />
        </div>
    </div>
</div>
</div>

Мои ViewModels

public class AddMaintananceVM
{
    public AddMaintananceVM()
    {
        Parts = new List<PartDetailsVM>();
    }

    [DataType(DataType.Date)]
    public DateTime Date { get; set; }
    public List<PartDetailsVM> Parts { get; set; }
}
 public class PartDetailsVM
{
    public int PartId { get; set; }
    public int AmountOfPart { get; set; }
    public string Units { get;  }
    public string Index { get; set; }
    public IEnumerable<SelectListItem> AllParts { get; set; }
}

Мой контроллер

    public IActionResult BakimIsle()
    {
        var model = new AddMaintananceVM();
        model.Date = DateTime.Now;
        model.MonthOfMaintanance = DateTime.Now.Month;
        var elevators = _maintananceService.GetAllOnMaintanance();
        var employees = _employeeService.GetAllForMaintanance();
        var products = _productService.GetAllForMaintanance();

        model.Elevators = new SelectList(elevators, "Id", "PublicName");
        model.Employees = new SelectList(employees, "Id", "FullName");

        model.Parts = new List<PartDetailsVM>()
        { new PartDetailsVM() { AllParts= new SelectList(products , "Id", "Name")} };

        return View(model);
    }

    [Route("bakim/bakimisle")]
    [HttpPost]
    public IActionResult BakimIsle(AddMaintananceVM model)
    {
        var maintanance = new Maintanance()
        {
            Date = model.Date,
        };
        _maintananceService.AddMaintanance(maintanance);

        _maintananceService.Complete();
        return RedirectToAction("Index");
    }


    public IActionResult AddPart()
    {
        var products = _productService.GetAllForMaintanance();

        var model = new AddMaintananceVM();
        model.Parts = new List<PartDetailsVM>()
        { new PartDetailsVM() { AllParts= new SelectList(products, "Id", "Name")} };

        return View(model);
    }
    public JsonResult LoadProductById(int productId)
    {
        var product= _productService.GetAllForMaintanance().Where(x=> x.Id == productId);

        return Json(product);
    }

Было бы здорово, если бы вы могли помочь мне исправить код.

EDIT

Благодаря Taplar в разделе комментариев. Пытаюсь исправить код ..

Это код, который я изменил. В основном превращение идентификаторов в классы.

 $("#parts-list").on('change',".partRow .product", function () {
            LoadProductsData($(".product option:selected").val());
        });

и

function LoadProductsData(id) {
        $(this).closest('.partRow').find('.unit').val('');
        $.ajax({
            type: "GET",
            url: "@Url.Action("LoadProductById")",
            datatype: "Json",
            data: { productId: id },
            success: function (data) {
                $.each(data, function (index, value) {
                    $(this).closest('.partRow').find('.unit').val(value.units);
                });
            }
        });
    }

Это изменения, которые я сделал. Все еще есть ошибки, и я действительно не могу понять, что. $ (this) .closest ('. partRow'). find ('. unit'). val (value.units) ничего не находит.