how to implement a listbox with " Add / Remove" buttons using asp.net mvc and jquery

Currently i have the following partial view which list all the available users and a "Add User to Class" link beside each user to register a user in a class:-

@model IEnumerable<Elearning.Models.User>
<tr>
    <th>
        Student ID
    </th>
</tr>

@foreach (var item in Model) {
    <tr >
        <td>
            @Html.DisplayFor(modelItem => item.UserID)
        </td>
        <td id = "userclass">
              @Ajax.ActionLink("Add User to Class", "Register", "User", new { id = item.UserID, classid = ViewBag.id },
                  new AjaxOptions { 
                      InsertionMode = InsertionMode.InsertAfter,
                      HttpMethod = "POST",
                      UpdateTargetId = "incrementadd"
               })
         </td>
    </tr>
}

The action method which will be called when clicking on the "Add User to Class" link is:-

[AcceptVerbs(HttpVerbs.Post)]
public PartialViewResult Register(string id, int classid)
{
    try
    {
       //Update code here
       User user = r.FindUser(id);
       Users_Classes uc = new Users_Classes();
       uc.AddedDate = DateTime.Now;
       uc.ClassID = classid;
       user.Users_Classes.Add(uc);
       r.Save();
       ViewBag.classid = classid;
       return PartialView("_usersearch2", uc);
    }
}

The above code is working fine , but i find it not easy to add each user by clicking on the link. So i am trying to add a listbox with a add/remove buttons to register and unregister user based on user selection, but i can not figure out how i can modify my code to implement the listbox with "Add/Remove" button using Jquery to make my system more user friendly. can anyone refer me to helping materials or sample code which can help me in my development? Best Regards