Here is the task at hand: The goal is to show information that was previously entered by the user on an editing page, with the data coming from a database. The requirement is to display existing information, allow for additions or deletions of current entries. Below is the code snippet: controller: This code snippet retrieves all professions associated with the user (and it works)

foreach(var up in _context.TutorProfessionAndCosts.ToList())
         {
             if (user.Id == up.UserId)
                 user.ProfessionAndCosts.Add(up);
         }

profession model

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

     public string UserId { get; set; }
     public User User { get; set; }
     public int IdTutorProfession { get; set; }
     public string EducationalSubject { get; set; }
    
     public int Cost_One { get; set; } //the cost of the lesson is individual
     public int Cost_Group { get; set; } //cost of class group class

     public string Currency { get; set; }
     public int IdCurrency { get; set; }
 }

editing page (currently not displaying previously entered information):

<div id="ProfessionBlock">
        
         <div class="Profession">
             <div class="row">
                 <div class="col">
                     <p class="mb-0">Choose the subject you teach:</p>

                     <input type="hidden" name="ProfessionAndCosts[0].UserId" value="@Model.Tutor.Id" />
                     <select name="ProfessionAndCosts[0].EducationalSubject" required="required">
                         @foreach (var profession in Model.educational_Subject)
                         {
                             <option value="@profession.EducationalSubject" >@profession.EducationalSubject</option>
                         }
                     </select>


                 </div>
                 <div class="col">
                     <p>Indicate the price for 1 hour:</p>
                     <div>
                         <p>Individual class: <input class="money" type="text" name="ProfessionAndCosts[0].Cost_One" /> </p>
                         <p>Group class: <input class="money" type="text" name="ProfessionAndCosts[0].Cost_Group" /> </p>
                         <label>Choose a currency: </label>
                         <select name="ProfessionAndCosts[0].Currency">
                             @foreach (var cur in Model.currency)
                             {
                                 <option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
                             }
                         </select>
                     </div>
                 </div>
             </div>
         </div>
        
        
     </div>
     <p>
         <a class="addNewProfession">Add new profession</a>
     </p>

Javascript function to add a new profession (working):

@section Scripts {
 <script>
     $(function () {
         var i = 0;
         $('.addNewProfession').click(function () {
             i++;
             var html2Add = `<div class="row">
         <div class="col">
             <p class="mb-0">Choose the subject you teach:</p>
             <select name="ProfessionAndCosts[${i}].EducationalSubject" required="required">
                 @foreach (var profession in Model.educational_Subject)
                 {
                     <option value="@profession.EducationalSubject">@profession.EducationalSubject</option>
                 }
             </select>
         </div>
         <div class="col">
             <label>Indicate the cost for 1 hour:</label>
             <p>
                 <p>Individual class: <input class="money" type="text" name="ProfessionAndCosts[${i}].Cost_One" /> </p>
                 <p>Group class: <input class="money" type="text" name="ProfessionAndCosts[${i}].Cost_Group" /> </p>
                 <select name="ProfessionAndCosts[${i}].Currency">
                     @foreach(var cur in Model.currency)
                     {
                         <option value="@cur.CurrencyMoney">@cur.CurrencyMoney</option>
                     }
                 </select>
             </p>
         </div>
     </div>`;
             $('#ProfessionBlock').append(html2Add);
         })
     })
 </script>

Attempted display code which allows editing but not adding new information:

@for (int p = 0; p < Model.Tutor.ProfessionAndCosts.Count(); p++)
 {
     <div class="Profession">
         <div class="row">
             <div class="col">
                 <p class="mb-0">Choose the subject you teach:</p>

                 <input type="hidden" name="ProfessionAndCosts[p].UserId" value="@Model.Tutor.Id" />
                 <select name="ProfessionAndCosts[p].EducationalSubject" required="required">
                    @foreach (var profession in Model.educational_Subject)
                     {
                         <option value="@profession.EducationalSubject" selected="@(profession.EducationalSubject == Model.Tutor.ProfessionAndCosts[p].EducationalSubject)">profession.EducationalSubject</option>
                     }
                 </select>


             </div>
             <div class="col">
                 <p>Indicate the price for 1 hour:</p>
                 <div>
                     <p>Individual lesson: <input class="money" type="text" name="ProfessionAndCosts[p].Cost_One" value="@Model.Tutor.ProfessionAndCosts[p].Cost_One" /> </p>
                     <p>Group lesson: <input class="money" type="text" name="ProfessionAndCosts[p].Cost_Group" value="@Model.Tutor.ProfessionAndCosts[p].Cost_Group" /> </p>
                     <label>Choose a currency: </label>
                     <select name="ProfessionAndCosts[p].Currency">
                         @foreach (var cur in Model.currency)
                         {
                             <option value="@cur.CurrencyMoney" selected="@(cur.CurrencyMoney == Model.Tutor.ProfessionAndCosts[p].Currency)">@cur.CurrencyMoney</option>
                         }
                     </select>
                 </div>
             </div>
         </div>
     </div>