How to use jQuery unobstructive validation in a partial view in .NET Core MVC?

Question

I have a.NET MVC Core Application in which I use Bootstrap Modal Popups for CRUD operations. I also have a navigation bar that has a dropdown in it.

I am encountering a strange bug. Whenever I click on the 'Create,' 'Edit,' or 'Delete' button and close the modal popup in my index page, my dropdown stops working. If I click on any of those buttons again, then the dropdown will start working again.

I've done tons of research on the internet but found no solution that would fit my needs. Any help would be greatly appreciated :)

Here's the relevant code:

My Index.cshtml file

@model IEnumerable<MonitoringFinances.Models.AdminModels.PredefinedCategory>
@{
    int counter = 1;
}
<div class="container">
    <div class="row my-3">
        <div class="col-12 col-md-8 p-3 ">
            <h1 class="display-5">
                Predefined Categories
            </h1>
        </div>
        <div class="col-12 col-md-4 text-end d-flex align-items-center justify-content-md-end">
            <a class="btn btn-dark px-4 fs-5" onclick="UpSert(0)">
                <i class="fas fa-plus"></i>&nbsp;Create New
            </a>
        </div>
    </div>
    <div class="row my-3">
        @if (Model.Count() > 0)
        {
            <div class="row my-3">
                <div class="d-flex align-items-center">
                    <table class="table table-striped text-center align-middle">
                        <thead>
                            <tr>
                                <th scope="col" class="fs-5">#</th>
                                <th scope="col" class="fs-5">Name</th>
                                <th scope="col" class="fs-5">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var category in Model)
                            {
                                <tr>
                                    <th scope="row" class="fs-5">@counter</th>
                                    <td class="fs-5">@category.Name</td>
                                    <td class="text-center">
                                        <div class="w-50 btn-group" role="group">
                                            <a onclick="UpSert(@category.Id)" class="btn btn-primary mx-2">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <a onclick="Delete(@category.Id)" class="btn btn-danger mx-2">
                                                <i class="far fa-trash-alt"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                counter++;
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        }
        else
        {
            <div class="col p-3">
                <p class="lead">No Predefined Category Exists!</p>
            </div>
        }
    </div>
</div>

<!--Create/Edit Category Modal-->
<div class="modal fade" id="UpSertCategoryModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h5 modal-title" id="modal-title">Create Predefined Category</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="UpSertCategoryModalBody">
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button id="UpSertCategoryFormButton" form="UpSertCategoryForm" type="submit" class="btn btn-primary">Save</button>
            </div>
        </div>
    </div>
</div>

<!--Delete Category Modal-->
<div class="modal fade" id="DeleteCategoryModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <p class="h6 modal-title" id="modal-title">Delete Predefined Category</p>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="DeleteCategoryModalBody">
            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button id="DeleteCategoryFormButton" form="DeleteCategoryForm" type="submit" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var UpSert = function (Id) {
            var url = "/PredefinedCategory/UpSert?Id=" + Id;
            if (Id > 0)
                $('#modal-title').html("Edit Predefined Category");
            $("#UpSertCategoryModalBody").load(url, function () {
                $("#UpSertCategoryModal").modal("show");
            });
        }

        var Delete = function (Id) {
            var url = "/PredefinedCategory/Delete?Id=" + Id;
            $("#DeleteCategoryModalBody").load(url, function () {
                $("#DeleteCategoryModal").modal("show");
            });
        }
    </script>
}

_UpSert.cshtml file:

@model MonitoringFinances.Models.AdminModels.PredefinedCategory
<!--Required Scripts and Stuff-->


<form asp-controller="PredefinedCategory" asp-action="UpSert" id="UpSertCategoryForm">
    <input type="hidden" asp-for="Id" />
    <div class="row mb-3">
        <label asp-for="Name" class="col-sm-2 col-form-label">Name</label>
        <div class="col-sm-10">
            <input asp-for="Name" class="form-control" id="Name" aria-describedby="Name">
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
</form>

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

Note: If I remove the script references in this UpSert file, then the dropdowns work without issues, but then my client-side validations don't work anymore :(

PredefinedCategoryController.cs

public IActionResult Index()
        {
            IEnumerable<PredefinedCategory> predefinedCategoryList = _db.PredefinedCategory;
            return View(predefinedCategoryList);
        }

        [HttpGet]
        public IActionResult UpSert(int? id)
        {
            if (id == null || id == 0)
            {
                return PartialView("~/Views/PredefinedCategory/_Upsert.cshtml");
            }
            else
            {
                PredefinedCategory predefinedCategory = _db.PredefinedCategory.Find(id);
                if (predefinedCategory == null)
                {
                    return NotFound();
                }
                return PartialView("~/Views/PredefinedCategory/_Upsert.cshtml", predefinedCategory);
            }
        }

       [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult Upsert(PredefinedCategory predefinedCategory)
        {
            if (ModelState.IsValid)
            {
                if (predefinedCategory.Id == 0)
                {
                    _db.PredefinedCategory.Add(predefinedCategory);
                }
                else
                {
                    _db.PredefinedCategory.Update(predefinedCategory);
                }
                _db.SaveChanges();
                return RedirectToAction(nameof(Index));
            }
            else
            {
                return StatusCode(500);
            }
        }

Nav Dropdown code in _Layout.html file:

 <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle text-dark" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Management
                                </a>

                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li>
                                        <a class="dropdown-item nav-link text-dark ps-2" asp-controller="Category" asp-action="Index">Categories</a>
                                    </li>
                                    @if (User.IsInRole(WebConstant.AdminRole))
                                    {
                                        <li>
                                            <hr class="dropdown-divider" />
                                        </li>
                                        <li>
                                            <a class="dropdown-item nav-link text-dark ps-2" asp-controller="PredefinedCategory" asp-action="Index">Predefined Categories</a>
                                        </li>

                                        <li>
                                            <a class="dropdown-item nav-link text-dark ps-2" asp-area="Identity" asp-page="/Account/Register">Create User</a>
                                        </li>
                                    }
                                </ul>
                            </li>