What's wrong with this jQuery code for multiple listboxes?

Question

I can't get the following jQuery code to work (it doesn't transfer selected items between listboxes) in an MVC 5 app:

<script>
        $(function () {
            $("add").click(function () {
                $("#listBoxAvail > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxSel");
                });
            });

            $("remove").click(function () {
                $("#listBoxSel > option:selected").each(function () {
                    $(this).remove().appendTo("#listBoxAvail");
                });
            });
        });

    </script>

The rest of the markup with the listboxes is:

@using (Html.BeginForm())
        {
           @Html.ListBoxFor(m => m.SelectedAttributes, Model.Attributes, new {id="listBoxAvail", SIZE = 5} ) 

            <input type="submit" name="add" 
                   id="add" value="MoveRight" />

            <input type="submit" name="remove" 
                   id="remove" value="MoveLeft" />

            <input type="submit" name="remove-all" id="remove-all" value="RemAll" />

            <input type="submit" name="select-all" id="select-all" value="SelAll" />

            @Html.ListBoxFor(m => m.SelectedAttributes2, Model.SelectedItems, new { id = "listBoxSel", SIZE = 5})
        } 
    </div>

The ViewModel is:

public class OptInViewModel
    {
        public IEnumerable<string> SelectedAttributes { get; set; }
        public IEnumerable<string> SelectedAttributes2 { get; set; }
        public IEnumerable<SelectListItem> Attributes { get; set; }
        public IEnumerable<SelectListItem> SelectedItems { get; set; }
    }

And the controller is:

 public ActionResult Index()
        {
            AttributeEntities db = new AttributeEntities();
            List<SelectListItem> listSelectListItems = new List<SelectListItem>();
            List<SelectListItem> listSelItems = new List<SelectListItem>();

            foreach (var attributes in db.HarmonyAttributes)
            {
                SelectListItem selectList = new SelectListItem
                {
                    Text = attributes.AttributeName,
                    Value = attributes.AtrributeLabel,
                    Selected = false
                };
                listSelectListItems.Add(selectList);
            }

            foreach (var sel in db.SelectedHarmonyAttributes)
            {
                SelectListItem selList = new SelectListItem
                {
                    Text = sel.CustomLabel,
                    Value = sel.HarmonyAttribute_ID.ToString(),
                    Selected = false
                };
                listSelectListItems.Add(selList);
            }

            OptInViewModel viewModel = new OptInViewModel
            {
                Attributes = listSelectListItems,
                SelectedItems = listSelItems
            };
        return View(viewModel);
    }
}

I can't figure out why the JQuery script won't work. What am I doing wrong?

Answer 1

Looks like selector is wrong, you are trying to assign handler to element "add":

$("add")

instead of element with id "add"

$("#add")

Same for "remove" element.

Answer 2

I know I am years late, but it might help somebody else.

It's refreshing because you buttons are o type submit.

Change this :

<input type="submit" name="remove" 
               id="remove" value="MoveLeft" />

To this :

<input type="button" name="remove" 
               id="remove" value="MoveLeft" />