Using Umbraco8

I have a Partial view that renders a heap of product cards (each card is rendered by another partial view).

the first partial view (parent partial view can be rendered with pagination or not.

if not pagination

<p>Total Products @Model.Count</p>
<div class="row">
    @foreach (Ibd_eCommerce_Product product in Model.OrderBy(x => x.CardPrice))
    {
    Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product);
    }
</div>

if pagination

<div id="pagination-ajax">
        @using (Ajax.BeginForm("AjaxProductPaginiation", "IBDCommerceElements", new AjaxOptions
        {
            HttpMethod = "Post",
            InsertionMode = InsertionMode.Replace,
            LoadingElementId = "progress",
            UpdateTargetId = "pagination-ajax"
        }))
        {
            @Html.AntiForgeryToken();   // Determain the number of videos on a page. Default is 8
            <input type="hidden" name="model" value='@Model.Id' />
            <input type="hidden" name="page-id" value="[email protected]"/>
            <div class="row">

                @{
                    foreach (Ibd_eCommerce_Product product in Model.Products)
                    {
                        string classControls = Model.ClassControls;
                        <!--<div class="@classControls">-->
                        Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product);
                        <!--</div>-->
                    }
                }
            </div>

            if (Model.TotalPages > 1)
            {
                <nav aria-label="Pagination alignment">
                    <ul class="pagination pagination-orange justify-content-center">
                        @if (Model.ActivePage > 1)
                        {
                            int activePage = Model.ActivePage - 1;
                            <li class="page-item">
                                <button class="page-link" name="submitButton" value="@activePage" type="submit" title="Previous">
                                    <span aria-hidden="true"><i class="ni arrow left" aria-hidden="true"></i></span>
                                </button>
                            </li>
                        }
                        @for (int p = 1; p < Model.TotalPages + 1; p++)
                        {
                            <li class="page-item @(p == Model.ActivePage ? "active" : string.Empty)">
                                <button class="page-link" name="submitButton" value="@p" type="submit">@p</button>
                            </li>
                        }
                        @if (Model.ActivePage < Model.TotalPages)
                        {
                            <li class="page-item">
                                <button class="page-link" name="submitButton" value="@(Model.ActivePage + 1)" type="submit" title="Next">
                                    <span aria-hidden="true"><i class="ni arrow right" aria-hidden="true"></i></span>
                                </button>
                            </li>
                        }
                    </ul>
                </nav>
            }
        }
    </div>

so first obvious deference is on is an ajax form

the card Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product); his this piece of code in it which is the section that gives the issue.

<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
        .......
                    using (Html.BeginUmbracoForm("SiteWideAddToBasket", "IBDCommerceStore", new { @class = "form", role = "form" }))
                    {
                        <input type="hidden" id="productId" name="productId" value="@Model.Id" />
                        <input type="hidden" id="variatKey" name="variatKey" value="@Model.ProductVariant.FirstOrDefault().Key" />
                        <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="[email protected]" type="submit">
                            Add To Cart
                        </button>
                    }
        .......
</div>

when rendering with pagination ie inside the ajax form the very first card and only the first card triggers the pagination controller routine rather than the add to cart routine. all other cards work correctly.

the rendered html should look like this

<form action="/store/" enctype="multipart/form-data" method="post">                            <input type="hidden" id="productId" name="productId" value="17230">
                            <input type="hidden" id="variatKey" name="variatKey" value="bdc277cc-10a1-427d-98c9-8873c427d0ea">
                            <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="addToBasket-17230" type="submit">
                                Add To Cart
                            </button>
<input name="ufprt" type="hidden" value="473D5EE6053ABCAF18F2132DDE85381B9E9F3FED27BCA78553E23A3DE3D8BCD5771C7595266876F51820597018BE4A3632F517F072B150F5F6CA7FEB3CF257CD13314ED173BDDE719B48D31DAEF0649B98BA595748B21F1AFB37E9DC1F0A170811A11E7504A4C23D596E56A7BC73B30B95FF18976F9E945BC7A3BB13DA9DA92BDCF0356E9686992E962B2FEAA610C50D7032E40C510760754002DFCF1978B1E8DC9F823E0661B6AF950DBEA78141E328F6D85F5E357C753B144CF92DA42C09FAAC85ADA2E55C1FAA7F6AE054E862F8FB"></form>

however it renders missing the

<input type="hidden" id="productId" name="productId" value="17230">
                            <input type="hidden" id="variatKey" name="variatKey" value="bdc277cc-10a1-427d-98c9-8873c427d0ea">
                            <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="addToBasket-17230" type="submit">
                                Add To Cart
                            </button>
<input name="ufprt" type="hidden" value="473D5EE6053ABCAF18F2132DDE85381B9E9F3FED27BCA78553E23A3DE3D8BCD5771C7595266876F51820597018BE4A3632F517F072B150F5F6CA7FEB3CF257CD13314ED173BDDE719B48D31DAEF0649B98BA595748B21F1AFB37E9DC1F0A170811A11E7504A4C23D596E56A7BC73B30B95FF18976F9E945BC7A3BB13DA9DA92BDCF0356E9686992E962B2FEAA610C50D7032E40C510760754002DFCF1978B1E8DC9F823E0661B6AF950DBEA78141E328F6D85F5E357C753B144CF92DA42C09FAAC85ADA2E55C1FAA7F6AE054E862F8FB">