How to cascade a multiselect list based on selecting a Dropbox with Asp.net core Razor

Question

I need help to create a dynamic control. I’m a beginner so... Problem: The page has a selectlist which shows the records of the Jobs table returning the Jobid in the post. I need to capture the id in the selection to execute a query and take the date of the same querry should return the people who have the same agenda date to a multiselectlist to select the "TEAM" people. is a many to many ratio in the Team tables, Volunteers and the Teamvolunteer normalization table.

public class CreateTeam : PageModel
{
    private readonly SementesApplicationContext _context;
[BindProperty]
public Team Team { get; set; }
public Job JobSeek { get; set; }
public CreateTeam(SementesApplicationContext context)
{
    _context = context;
}

public IActionResult OnGet()
{


    var ListJobs = from j in _context.Job
                    .Include(k => k.Entity)
                    .OrderBy(k => k.Entity.EntityName)
                   select j;

    ViewData["JobId"] = new SelectList(ListJobs, "JobId", "JobDay", "Entity.EntityName", "Entity.EntityName");




    return Page();
}
public async Task<JsonResult> GetVoluntters(int jobID)
{
    JobSeek = await _context.Job.FindAsync(jobID);
    var date = JobSeek.JobDay;
    var period = JobSeek.JobPeriod;
    var ListVolunteers = from v in _context.Volunteer
                         join s in _context.Schedule on v.VolunteerId equals s.VolunteerId
                         where (date==s.TSDate)&&(period==s.TSPeriod)
                         select new
                         {
                             v.VolunteerId,
                             v.VName
                         };
    ViewData["VolunteerId"] = new MultiSelectList(ListVolunteers, "VolunteerId", "VName");

    return new JsonResult(ViewData);
}

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    _context.Team.Add(Team);
    await _context.SaveChangesAsync();
    foreach (int v in Team.Volunteers)
    {
        var emptyTeamVolunteer = new TeamVolunteer
        {
            VolunteerId = v,
            TeamId = Team.TeamId
        };

        _context.TeamVolunteer.Add(emptyTeamVolunteer);
    }
    await _context.SaveChangesAsync();
    return RedirectToPage("./Index");
}
}

Page:

@page
@model TeamApplication.CreateTeam

@{
    ViewData["Title"] = "Team Create";
}
<h2>Team Create</h2>

<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">

                <label asp-for="Team.JobId" class="control-label"></label>

                <select asp-for="Team.JobId" class="form-control" asp-items="ViewBag.JobId"></select>
            </div>

            <div class="form-group">
                <label asp-for="Team.Volunteers" class="control-label"></label>
                <select asp-for="Team.Volunteers" class="form-control" asp-items="ViewBag.VolunteerId"></select>

            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
          <script>
            $(function () {
                $("#Team.JobId").on("change", function () {
                    var JobId = $(this).val();
                    $("#Team.Volunteers").empty();
                    $("#Team.Volunteers").append("<option value=''>Select Volunteer</option>");
                    $.getJSON(`?handler=Tem.Volunterrs&JobId=${JobId}`, (data) => {
                        $.each(data, function (i, item) {
                            $("#Team.Volunteers").append(`<option value="${item.VolunteerId}">${item.VName}</option>`);
                        });
                    });
                });
            });
        </script>

    }