How do I get the values of a BeginCollectionItem in javascript

Question

I want to get values of a BeginCollectionItem using javascript but it seems like i am not winning

my html

  @using HtmlHelpers.BeginCollectionItemCore
  @using E_Commerce.Application.Models
  @model ProductImageModel

  <li class="mb-2">
    @using (Html.BeginCollectionItem("ProductImages"))
    {
        Html.RenderPartial("_imagesPartial", Model);
    }
 </li>

the _imagesPartial html

@model E_Commerce.Application.Models.ProductImageModel

<div class="col-md-12 row mb-2">
    <div class="col-md-4 imageDiv">
        <img class="border rounded" />
    </div>
    <div class="col-md-4">
        <input type="file" asp-for="File" onchange="uploadImageTest(this)" />
    </div>
    <div class="col-md-4">
        <a href="#" class="btn btn-danger" title="Remove row Entry" onclick="removeEntry(this)">Remove</a>
    </div>
</div>

and my javascript

 let addNewImagesFormSubmit = (event) => {
    var Id = $("#Id").val();
    var productImages = $("#ProductImages").val();
    $.ajax({
        url: "@Url.Action("AddNewImages","ProductImage")",
        data: {
            Id: Id,
            productImages:productImages
        },
        success: function (data) {
            $("#productImagesDiv").html(data);
        }
    })
}

the server side does not seem to get any images when using javascript to get the BeginCollectionItem.

how do i get it to work