Jquery – Cascading dropdown AJAX loop call

there is a part of my form in which a user can enter the building and room and click the add button if they want to enter another building and room. I am using AJAX to populate the rooms based on the building selection. It works for the first set but once I click add and the page reloads it resubmits the Ajax call therefore deleting the option the user selected.

Once I click add and there are two dropdowns for building and two for rooms, regardless of which building dropdown I click, it only affects the second room dropdown.

Any guidance would be appreciated.

            for (var a = 0; a < @Model.OnCampusSchedules.Count; a++) {
                var buildingSelectId = '#BuildingSelect_' + a;
                var roomSelectId = '#RoomSelect_' + a;

                var selectedBuildingValue = $(buildingSelectId).val();
                var selectedRoomValue = $(roomSelectId).val();

                $(buildingSelectId).change(function () {
                    var selectedBuilding = $(this).val();
                    var roomSelect = $(roomSelectId);

                    $(roomSelect).empty();

                    roomSelect.addClass('spinner').prop('disabled', true);


                    $.ajax({
                        url: '@Url.Action("GetRoomNumbers", "External")',
                        type: 'GET',
                        data: {
                            building: selectedBuilding,
                        },
                        success: function (data) {
                            if (data.length > 0){
                                $(data).each(function (index, item) {
                                    roomSelect.append('<option value="' + item + '">' + item + '</option>');
                                });
                                roomSelect.val(selectedRoomValue);
                                roomSelect.prop('disabled', false);
                            }
                        },
                        error: function () {
                            console.error("Failed to get rooms");
                        },
                        complete: function () {
                            roomSelect.removeClass('spinner');
                        }
                    });
                }).change();

                $(roomSelectId).val(selectedRoomValue);
            }
        });

            <div class="tab-content" id="schedule">
                <h2 class="h3">Schedule</h2>
                @for(a = 0; a < Model.OnCampusSchedules.Count; a++)
                {
                    @if (Model.OnCampusSchedules[a].IsDeleted)
                    {
                        <input type="hidden" asp-for="OnCampusSchedules[a].IsDeleted" value="true" />
                    }
                    else
                    {
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].StartTime"></span>
                                    <label asp-for="OnCampusSchedules[a].StartTime" class="font-weight-bold">Start Time: <span class="required" aria-hidden="true">*</span></label>
                                    <input asp-for="OnCampusSchedules[a].StartTime" type="time" aria-required="true" class="form-control" required />
                                </div>
                            </div>

                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].EndTime"></span>
                                    <label asp-for="OnCampusSchedules[a].EndTime" class="font-weight-bold">End Time: <span class="required" aria-hidden="true">*</span></label>
                                    <input asp-for="OnCampusSchedules[a].EndTime" type="time" aria-required="true" class="form-control" required />
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].Building"></span>
                                    <label asp-for="OnCampusSchedules[a].Building" class="font-weight-bold">Building: <span class="required" aria-hidden="true">*</span></label>
                                    <select asp-for="OnCampusSchedules[a].Building" asp-items="Model.Buildings" id="BuildingSelect_@a" aria-required="true" class="form-control" required></select>
                                </div>
                            </div>
                            <div class="col">
                                <div class="form-group">
                                    <span asp-validation-for="OnCampusSchedules[a].Room"></span>
                                    <label asp-for="OnCampusSchedules[a].Room" class="font-weight-bold">Room: <span class="required" aria-hidden="true">*</span></label>
                                    <select asp-for="OnCampusSchedules[a].Room" asp-items="Model.Rooms" id="RoomSelect_@a" aria-required="true" class="form-control"></select>
                                </div>
                            </div>
                        </div>
                        <div class="text-right">
                            <button class="btn btn-danger @(Model.OnCampusSchedules.Where(a => !a.IsDeleted).Count() == 1 ? "d-none" : "")"
                                    formnovalidate type="submit" id="delbutton[@a]"
                                    asp-action="Delete" asp-controller="External" asp-all-route-data="@(new Dictionary<string, string> { { "Id", a.ToString() } })">
                                Delete Schedule
                            </button>
                        </div>

                        <hr />
                    }
                }


            <div class="text-right">
                <button class="btn btn-success" formnovalidate type="submit" id="addbutton" asp-action="Add" asp-controller="External">
                    Add Schedule 
                </button>
            </div>

            <div class="form-row">
                <div class="col-sm-6 offset-sm-3 col-md-4 offset-md-4">
                    <div class="form-group mt-3">
                        <button id="Submit" type="submit" class="btn btn-sm btn-block btn-secondary">Submit</button>
                    </div>
                </div>
            </div>
            </div>
        </form>
    </div> 
</div>

        public IActionResult Add(ExternalForm externalForm)
        {
            externalForm.OnCampusSchedules.Add(new OnCampusSchedule(_processUser));

            return View("Index", externalForm);
        }