Moving items from one listbox to another using Jquery

Moving items from one listbox to another using Jquery

Hello

I basically want to move items from one listbox to another using Jquery. I am trying to do this in my MVC application.

The code commented below works but it is not what I want. So if I select an item on the source listbox it gets added to the destination listbox. I basically want the movement to happen upon click of the button. That is the      $('#ShiftRight').click(function () that i have written below. Further below you would see the two listboxes and button code. The problem that I am facing is when I click the button, the item moves to the destination for a second and goes back the source again. Could someone tell me why this is happening ?

        //$('#sourceItems').change(function () {
        //    $('#sourceItems option:selected').appendTo('#destinationItems');
        //});
      
        $('#ShiftRight').click(function () {
            $('#sourceItems option:selected').appendTo('#destinationItems');
        });




            <div class="Row">
                <div class="borderlessCell" style="vertical-align:top">
                    <p>@Html.Label("List of Recipients")</p>
                </div>
                <div class="borderlessCell" style="vertical-align:top">
                    @Html.ListBox("sourceItems", (IEnumerable<SelectListItem>)ViewBag.UserList, new { @style = "width: 250px;height: 130px;" })
                </div>
                <div class="borderlessCell" style="vertical-align:middle">
                    <p><input type="submit" id="ShiftRight" value=">>" /> </p>
                    <p> <input type="submit" id="ShiftLeft" value="<<" /></p>
                </div>

                <div class="borderlessCell">
                    @Html.ListBox("destinationItems", new SelectList(new[] { "" }), new { @style = "width: 250px;height: 130px;" })
                    
            </div>