Как я могу динамически добавлять входы в форму из модального (

Question

У меня есть форма внутри моего приложения. NET Core 2.2 MVC для создания проектов, оно используется для заполнения следующей модели представления:

ProjectCreateViewModel:

public class ProjectCreateViewModel    
{
        public int ProjectId { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public ICollection<ProjectRequirement> ProjectRequirements { get; set; }
        public ICollection<ProjectTask> Tasks { get; set; }
        public Priority Priority { get; set; }
        public Status Status { get; set; }
        public bool AwardEligibility { get; set; }
        public decimal Progress { get; set; }
        public List<ProjectUsersViewModel> Users { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime Deadline { get; set; }
        public DateTime EstimatedCompletionDate { get; set; }
        public List<ProjectUsersViewModel> AllUsers { get; set; }
    }
}

Форма состоит из 3 вкладок, одна из которых - «Требования». На этой вкладке я создал кнопку «Новое требование», которая открывает модальное окно с формой внутри, чтобы добавить новое требование в форму (сопоставленное со списком ProjectRequirements). Я хочу, чтобы пользователь мог добавлять столько требований, сколько ему нужно, в идеале без обновления страницы.

Вкладка формы требований, и это "Добавить новый" Модальный:

Снимок экрана с внешнего интерфейса веб-сайта

Модал «Новые требования», содержащийся в форме:

<form asp-action="Create">
        <ul class="nav nav-tabs nav-fill" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="project-add-details-tab" data-toggle="tab" href="#project-add-details" role="tab" aria-controls="project-add-details" aria-selected="true">Details</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="project-add-requirements-tab" data-toggle="tab" href="#project-add-requirements" role="tab" aria-controls="project-add-requirements" aria-selected="false">Requirements</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="project-add-members-tab" data-toggle="tab" href="#project-add-members" role="tab" aria-controls="project-add-members" aria-selected="false">Members</a>
            </li>
        </ul>

        <div class="text-center">
            <hello-world></hello-world>
        </div>

        <div class="modal-body">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="project-add-details" role="tabpanel">
                    <h6>General Details</h6>
                    <div class="form-group row align-items-center">
                        <label asp-for="Name" class="col-1"></label>
                        <input asp-for="Name" class="form-control col-4" placeholder="Project name" />
                        <span asp-validation-for="Name" class="text-danger form-validation"> </span>
                    </div>
                    <div class="form-group row align-items-center">
                        <label asp-for="Description" class="col-1">Description</label>
                        <textarea asp-for="Description" class="form-control col-4" rows="3" placeholder="Project description"></textarea>
                        <span asp-validation-for="Description" class="text-danger form-validation"></span>
                    </div>
                    <hr>
                    <h6>Timeline</h6>
                    <div class="form-group row align-items-center">
                        <label asp-for="StartDate" class="col-1">Start Date</label>
                        <input asp-for="StartDate" class="form-control col-2" placeholder="Select a date" data-flatpickr data-default-date="2021-04-21" data-alt-input="true" />
                        <span asp-validation-for="StartDate" class="text-dange form-validationr"></span>
                    </div>
                    <div class="form-group row align-items-center">
                        <label asp-for="Deadline" class="col-1">Due Date</label>
                        <input asp-for="Deadline" class="form-control col-2" placeholder="Select a date" data-flatpickr data-default-date="2021-09-15" data-alt-input="true" />
                        <span asp-validation-for="Deadline" class="text-danger form-validation"></span>
                    </div>
                    <hr>
                    <h6>Project Priority</h6>
                    <div class="form-group row align-items-center">
                        <label asp-for="Priority" class="col-1"></label>
                        <select asp-for="Priority" asp-items="Html.GetEnumSelectList<Priority>()" class="form-control col-1">
                            <option value=""></option>
                        </select>
                        <span asp-validation-for="Priority" class="text-danger form-validation"></span>
                    </div>
                </div>
                <div class="tab-pane fade" id="project-add-members" role="tabpanel">
                    <div class="users-manage" data-filter-list="form-group-users">
                        <div class="input-group input-group-round">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="material-icons">filter_list</i>
                                </span>
                            </div>
                            <input type="search" class="form-control filter-list-input" placeholder="Filter members" aria-label="Filter Members">
                        </div>
                        <div class="form-group-users">

                            @for (int i = 0; i < Model.AllUsers.Count; i++)
                            {
                                <div class="custom-control custom-checkbox">
                                    <input asp-for="@Model.AllUsers[i].IsSelected" type="checkbox" class="custom-control-input" />
                                    <label asp-for="@Model.AllUsers[i].IsSelected" class="custom-control-label">
                                        <span class="d-flex align-items-center">
                                            <img alt="Kenny Tran" src="~/assets/img/avatar-male-6.jpg" class="avatar mr-2" />
                                            <span class="h6 mb-0" data-filter-by="text">@Model.AllUsers[i].Username</span>
                                        </span>
                                    </label>
                                    <input asp-for="@Model.AllUsers[i].UserId" type="hidden" />
                                </div>
                            }
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="project-add-requirements" role="tabpanel">
                    <h6>Requirements</h6>

                    <div class="modal fade" id="new-requirement-modal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">Add a New Requirement</h5>
                                    <button type="button" class="close btn btn-round" data-dismiss="modal" aria-label="Close">
                                        <i class="material-icons">close</i>
                                    </button>
                                </div>
                                <!--end of modal head-->
                                <div class="modal-body">
                                    <div>
                                        <div class="tab-content">
                                            <h6>Requirement Details</h6>
                                            <div class="form-group row">
                                                <label class="col-3">Title</label>
                                                <input class="form-control col" placeholder="Requirement title" />
                                            </div>
                                            <div class="form-group row align-items-center">
                                                <label class="col-3">Description</label>
                                                <textarea class="form-control col" rows="3" placeholder="Requirement description"></textarea>
                                            </div>
                                            <div class="form-group row align-items-center">
                                                <label class="col-3">Priority</label>
                                                <select asp-items="Html.GetEnumSelectList<Priority>()" class="form-control col-3">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end of modal body-->
                                <div class="modal-footer">
                                    <button role="button" class="btn btn-primary" type="submit">
                                        Add requirement
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br />
                    <button role="button" type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#new-requirement-modal">
                        New Requirement
                    </button>
                </div>
            </div>
        </div>

        <!--end of modal body-->
        <div class="modal-footer">
            <button role="button" class="btn btn-primary" type="submit">
                Create Project
            </button>
        </div>
    </form>

Модель ProjectRequirement:

public class ProjectRequirement
{
        public int ProjectRequirementId { get; set; }
        public Project Project { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public Priority Priority { get; set; }
        public RequirementCategory Category { get; set; }
}

Каков наилучший способ достижения этого, мне нужно 2 формы? И если да, то как этого добиться, если вложенные формы не кажутся невозможными без ошибки.

Заранее спасибо.