Hi JavaScriopt Expert:

I am adding Dual Listbox in my MVC razor view, the JavaScript codes is like this:

$(function () {
        $("#ShiftRight,#ShiftLeft").click(function (event) {
            var ID = $(event.target).attr("ID");
            var ChooseFrom = ID == "ShiftRight" ? "#ChooseLeft" : "#ChooseRight";
            var moveTo = ID == "ShiftRight" ? "#ChooseRight" : "#ChooseLeft";
            var SelectData = $(ChooseFrom + " :selected").toArray();
            $(moveTo).append(SelectData);
            SelectData.remove;
        });

});

and razor view:

<td>
                @Html.ListBox("ChooseLeft", ViewBag.listbox1 as IEnumerable<SelectListItem>, new { size = "15", style = "width:160px;", multiple = "multiple" })
            </td>
            <td>
                <input id="ShiftRight" type="button" value="> " />
            </td>
            <td>
                <input id="ShiftLeft" type="button" value="< " />
            </td>
            <td>
                @Html.ListBox("ChooseRight", null, new { size = "15", style = "width:160px;", multiple = "multiple" })
            </td>

This is working fine, but it is only moving one selected item on every click ">" or "<" , now I want to add ">>" and "<<" which remove all items from left to right or from right to left without needing to select. Does anybody know how to make it working? Thanks a lot for any help,