Why does partial returns duplicate partial view on error

I have a .net MVC project that renders a partial view.

The button should append a a partial using jquery which is working, but the issue happens when i send the form.

code for appending the HTML:

function OnPpaContainerClick() {
  const ppaBtn = $(".add-ppa-btn");
  ppaBtn.off();

  ppaBtn.on("click", function (event) {
    event.preventDefault();

    const mfoContainer = $(this).parents(".mfo-container");
    const mfoIdx = mfoContainer.data("mfoidx");
    const ppaIdx = mfoContainer.children(".ppa-container").length;

    $(mfoContainer).append(CreatePpa(mfoIdx, ppaIdx));
  });
}

Partial parent:

@for (int i = 0; i < Model.Mfos.Count; i++)
  {

    ViewData["MfoIndex"] = i;
    <div class="custom-border-color mfo-container mt-2 border border-2 rounded" data-mfoidx="@i">
      <div class="p-2 pe-0 d-flex flex-row gap-2">
        @* <input type="hidden" name="Mfos[@i].Id" value="@(Model.Mfos[@i].Id)" /> *@

        <div class="form-floating form-group col-1 gap-2">
          <input style="height: 4rem" type="text" id="Mfos[@i].Title" name="Mfos[@i].Title" class="form-control"
            value="@(Model.Mfos[@i].Title)" />
          <label name="Mfos[@i].Title" class="control-label text-black">MFO No.</label>
        </div>

        <div class="form-floating form-group col-3 gap-2">
          <textarea style="height: 4rem" class="form-control" name="Mfos[@i].Description"
            value="@(Model.Mfos[@i].Description)"> </textarea>
          <label id="Mfos[@i].Description" name="Mfos[@i].Description" class="control-label text-black">
            Title</label>
        </div>

        <div class="my-auto">
          <button type="button" class="add-ppa-btn btn btn-primary">Add PPA</button>
        </div>
      </div>
      @for (int ppaIdx = 0; ppaIdx < Model.Mfos[i].Ppas.Count; ppaIdx++)
      {
        ViewData["ppaIdx"] = ppaIdx;
        <partial name="Shared/_Ppa" view-data="ViewData" />
      }
    </div>
  }

Partial Child

<div class="ppa-container">
  @for (int ppaIdx = 0; ppaIdx < @Model.Mfos[MfoIndex].Ppas.Count; ppaIdx++)
  {
    @ppaIdx
    <div class="ppa-case ps-2 pb-0 d-flex flex-row">
      @* <input type="hidden" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Id" value="@(Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Id)" />
    *@

      <div class="form-floating form-group col-2">
        <input style="height: 4rem" id="Mfos[@MfoIndex].Ppas[@ppaIdx].Title" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Title"
          class="form-control border-bottom-0 border-end-0 rounded-0 pe-0"
          value="@Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Title" />
        <label name="Mfos[@MfoIndex].Ppas[@ppaIdx].Title" class="control-label text-black">PPA No.</label>
      </div>

      <div class="form-floating form-group col-3">
        <textarea style="height: 4rem" class="form-control border-bottom-0 rounded-0"
          name="Mfos[@MfoIndex].Ppas[@ppaIdx].Description"
          value="@Model.Mfos[@MfoIndex].Ppas[@ppaIdx].Description"> </textarea>
        <label id="Mfos[@MfoIndex].Ppas[@ppaIdx].Description" name="Mfos[@MfoIndex].Ppas[@ppaIdx].Description"
          class="control-label text-black">
          Title
        </label>
      </div>
    </div>
  }
</div>

Create controller:

 public async Task<ActionResult> Create(OpcrVM model)
  {
    if (ModelState.IsValid)
    {
      await _opcrService.Create(model);
      return RedirectToAction(nameof(Index));
    }
    ViewData["UserSelectList"] = await GetUserSelectList();
    ViewData["TimelinessOptions"] = GenerateTimelinessOptions();

    return View(model);
  }

I also check the model if the data gets duplicated but its not.

I also check the http request sent on the browser its correct except for the response. It renders the duplicate.

Browser request:

Browser response: