Problem with displaying the list asp.net core mvc 3.0 in page

I had the following problem:
I need the user to fill in several fields (the work he performs and indicate the price for this work)
Since there are several such jobs, I use the list, but I get the following error:
ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

This error appears as soon as I go to the "edit" page.

Here is my controller code:

        User user = await _userManager.FindByNameAsync(User.Identity.Name);
        foreach(var up in _context.TutorProfesionAndCosts.ToList())
        {
            if (user.Id == up.UserId)
                user.ProfesionAndCosts.Add(up);
        }

User models

    public List<TutorProfesionAndCost> ProfesionAndCosts { get; set; }

    public User()
    {
        ProfesionAndCosts = new List<TutorProfesionAndCost>();
    }

Models of "work"

public class TutorProfesionAndCost
{
    public int Id { get; set; }

    public string UserId { get; set; }
    public User User { get; set; }
    
    public string EducationalSubject { get; set; }

    public int Cost_One { get; set; } 
    public int Cost_Group { get; set; } 

    public string Currency { get; set; }
}

edit page

@{int i = 0;} 

<p>
    <div class="row">
        <div class="col">
            <label class="mb-0">Оберіть предмет який ви викладаєте:</label>
            <select asp-for="@Model.Tutor.ProfesionAndCosts[@i].EducationalSubject" required="required">
                @foreach (var profesion in Model.educational_Subject)
                {
                    <option value="@profesion.EducationalSubject">@profesion.EducationalSubject</option>
                }
            </select>
        </div>
        <div class="col">
            <label>Вкажіть вартість за 1 годину:</label>
            <p>
                <span>Індивідуальне заняття: <input class="money" type="text" asp-for="@Model.Tutor.ProfesionAndCosts[@i].Cost_One" /> </span>
                <span>Групове заняття: <input class="money" type="text" asp-for="@Model.Tutor.ProfesionAndCosts[@i].Cost_Group" /> </span>
                <select asp-for="@Model.Tutor.ProfesionAndCosts[@i].Currency">
                    @foreach (var cur in Model.currency)
                    {
                        <option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
                    }
                </select>
            </p>
        </div>
    </div>

    <button onclick="addSubject()">New</button>
</p>

javascript new subject

<script>
function addSubject() {
    var index = document.querySelectorAll('.row').length;
    var html = `<div class="row">
        <div class="col">
            <label class="mb-0">Оберіть предмет який ви викладаєте:</label>
            <select asp-for="@@Model.Tutor.ProfesionAndCosts[${index}].EducationalSubject" required="required">
                @foreach (var profesion in Model.educational_Subject)
                {
                    <option value="@profesion.EducationalSubject">@profesion.EducationalSubject</option>
                }
            </select>
        </div>
        <div class="col">
            <label>Вкажіть вартість за 1 годину:</label>
            <p>
                <span>Індивідуальне заняття: <input class="money" type="text" asp-for="@@Model.Tutor.ProfesionAndCosts[${index}].Cost_One" /> </span>
                <span>Групове заняття: <input class="money" type="text" asp-for="@@Model.Tutor.ProfesionAndCosts[${index}].Cost_Group" /> </span>
                <select asp-for="@@Model.Tutor.ProfesionAndCosts[${index}].Currency">
                    @foreach(var cur in Model.currency)
                    {
                        <option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
                    }
                </select>
            </p>
        </div>
    </div>`;
    $('#subjects').append(html);
    i = index + 1;
}
</script>

The problem was solved. Instead of "asp-for" I passed the value using "name"

<div id="ProfesionBlock">
<div class="Profesion">
<div class="row">
<div class="col">
<p class="mb-0">Оберіть предмет який ви викладаєте:</p>
<input type="hidden" name="ProfesionAndCosts[0].UserId" value="@Model.Tutor.Id" />
<select name="ProfesionAndCosts[0].EducationalSubject" required="required">
@foreach (var profesion in Model.educational_Subject)
{
<option value="@profesion.EducationalSubject">@profesion.EducationalSubject</option>
}
</select>
</div>
<div class="col">
<p>Вкажіть вартість за 1 годину:</p>
<div>
<p>Індивідуальне заняття: <input class="money" type="text" name="ProfesionAndCosts[0].Cost_One" /> </p>
<p>Групове заняття: <input class="money" type="text" name="ProfesionAndCosts[0].Cost_Group" /> </p>
<label>Оберіть валюту: </label>
<select name="ProfesionAndCosts[0].Currency">
@foreach (var cur in Model.currency)
{
<option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
}
</select>
</div>
</div>
</div>
</div>
</div>
<p>
<a class="addNewProfesion">Добавити нову професію</a>
</p>
@section Scripts {
<script>
$(function () {
var i = 0;
$('.addNewProfesion').click(function () {
i++;
var html2Add = `<div class="row">
<div class="col">
<p class="mb-0">Оберіть предмет який ви викладаєте:</p>
<select name="ProfesionAndCosts[${i}].EducationalSubject" required="required">
@foreach (var profesion in Model.educational_Subject)
{
<option value="@profesion.EducationalSubject">@profesion.EducationalSubject</option>
}
</select>
</div>
<div class="col">
<label>Вкажіть вартість за 1 годину:</label>
<p>
<p>Індивідуальне заняття: <input class="money" type="text"  name="ProfesionAndCosts[${i}].Cost_One" /> </p>
<p>Групове заняття: <input class="money" type="text" name="ProfesionAndCosts[${i}].Cost_Group" /> </p>
<select name="ProfesionAndCosts[${i}].Currency">
@foreach(var cur in Model.currency)
{
<option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
}
</select>
</p>
</div>
</div>`;
$('#ProfesionBlock').append(html2Add);
})
})
</script>

Controller

public async Task<IActionResult> AccountEditTutor( List<TutorProfesionAndCost> ProfesionAndCosts)
{
var userProf = await _context.TutorProfesionAndCosts
.Where(up => up.UserId == user.Id)
.ToListAsync();
_context.TutorProfesionAndCosts.RemoveRange(userProf);
foreach(var userProfAdd in ProfesionAndCosts)
{
var up = new TutorProfesionAndCost
{
UserId = user.Id,
EducationalSubject = userProfAdd.EducationalSubject,
Cost_One = userProfAdd.Cost_One,
Cost_Group = userProfAdd.Cost_Group,
Currency = userProfAdd.Currency
};
await _context.TutorProfesionAndCosts.AddAsync(up);
}
///....
}

The code is not the best but it works