How can I bind multi select list items that have been dynamically added using the .net core framework?

I am using .net core 2.2 Razor Pages to build my current project. I want to be able to have 2 multi-select lists in which I pass values from one list to the other and vice versa. I am able to load the left side list with the values required using binding. I also have the buttons to transfer X amount of selected items to the right side list. This is done using jquery. However when I submit my form and get the OnPostAsync The values from the list on the right side are lost and the ones on the left side are as if they where never removed.

I understand that to dynamically add controls that bind to a property you require adding all the necessary attributes. I have compared the generated html from the left list (generated by .net core) to the right side list (generated by me using jquery) and they are identical so I don't see what attributes might be missing...

Below is a sample of the code I am working with.

```html
<table width="100%">
<tr>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesLeft" asp-items="@(new SelectList(Model.RolesLeft, "Id", "Name"))" class="form-control" multiple>
        </select>
    </td>
    <td class="centered">
        <a id="role-add" class="button-pointer">>></a>
    </td>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesRight" asp-items="@Model.RolesRight" class="form-control" multiple>
        </select>
    </td>
</tr>
<tr>
    <td class="centered">
        <a id="role-remove" class="button-pointer"><<</a>
    </td>
</tr>
</table>
```

(Please note there is a submit button as well which performs the OnPostAsync)

The properties that are binding are in my C# code. The left side roles are a list of Role objects while on the right side I made a list of SelectListItem which I will later convert in the OnPostAsync method. The left side list is populated in the OnGetAsync method during loading (I am not putting this code here because it works and I want to avoid confusion of bloat code):

```C#
[BindProperty]
public List<Role> RolesLeft { get; set; }

[BindProperty]
public List<SelectListItem> RolesRight { get; set; } = new List<SelectListItem>();
```

Finally the javascript that runs when I select the >> link to move over the selected items to the right side executes the following code:

```JavaScript
$(document).ready(function () {
    $("#role-add").on("click", function () {
        moveRoles("RolesLeft", "RolesRight");
    });

    $("#role-remove").on("click", function () {
        moveRoles("RolesRight", "RolesLeft");
    });

    function moveRoles(from, to) {
        var items = $("#" + from + " option:selected").map(function () {
            return $(this);
        }).get();

        for (i = 0; i < items.length; i++) {
            $("#" + from + " option[value='" + items[i].val() + "']").remove();

            $("#" + to).append($('<option />', {
                value: items[i].val(),
                text: items[i].text()
            }));
        }
    }
});
```

I'm not sure if I missed anything but if so please let me know and I will update the post to provide more information. How can I get this working properly? I have been able to dynamically generate other types of controls and get it to bind but this one I have not had any success.