Сохранение порядка по умолчанию после перемещения элементов между двумя списками

Question

Итак, я инициализировал два списка, один для выбранных опций, а другой для доступных опций и вставив в них данные следующим образом:

Html

@Html.ListBox("selectedOptions", (MultiSelectList) ViewBag.selSectOpts, new {@class = "form-control", style="height:200px"}
@Html.ListBox("availOptions", (MultiSelectList) ViewBag.availSectOpts, new {@class = "form-control", style="height:200px"})

C #

private void PopulateAssignedSectorData(Agency agency)
{        
        var allSectors = _db.Sectors.Where(s => s.deleted == false).OrderBy(s => s.name);
        var availableSectors = new HashSet<int>(agency.Sectors.Select(b => b.id));
        var viewModelAvailable = new List<AgencySectorViewModel>();
        var viewModelSelected = new List<AgencySectorViewModel>();
        foreach (var sector in allSectors)
        {
            if (availableSectors.Contains(sector.id))
            {
                viewModelSelected.Add(new AgencySectorViewModel
                {
                    SectorID = sector.id,
                    SectorName = sector.name,
                    //Assigned = true
                });
            }
            else
            {
                viewModelAvailable.Add(new AgencySectorViewModel
                {
                    SectorID = sector.id,
                    SectorName = sector.name,
                    //Assigned = false
                });
            }
        }

        ViewBag.selSectOpts = new MultiSelectList(viewModelSelected, "SectorID", "SectorName");
        ViewBag.availSectOpts = new MultiSelectList(viewModelAvailable, "SectorID", "SectorName");
}

JS

$('#selectedOptions').change(function (e) {
    var selectedOpts = $('#selectedOptions option:selected');

    $('#availOptions').append($(selectedOpts));
    $(selectedOpts).remove();
    e.preventDefault();


});

$('#availOptions').change(function (e) {
    var selectedOpts = $('#availOptions option:selected');
    $('#selectedOptions').append($(selectedOpts));
    $(selectedOpts).remove();
    e.preventDefault();
});

Моя проблема заключается в том, что когда я перемещаю элементы между двумя списками, элемент из первого списка вставляется в нижнюю часть второго и наоборот.-versa.

Я хочу сохранить первоначальный порядок, и я понятия не имею, как это сделать, поскольку оба моих списка настраиваются на основе запроса.Любая помощь очень ценится.