Select2 using Ajax (multi select) - when selecting second one first one disappars

Question

I am stuck on this problem - the ajax call retrieves the categories ok from the database, and when I select the search result the first time it also shows up in the search box. It is only when I select the search result the second time, first and second selection disappear together.

 <select class="" id="Categories" multiple="multiple" name="SubCategories"></select>


    $(function () {           
        $("#Categories").selecttwo({
           action:StoryCreateEditOptions.url.GetCategories,
           placeHolder:'Select categories',
           element:$("#Categories")

        })
    });
    $.widget("cf.selecttwo", {
       options: {
       action: '',
       placeHolder: '',
       element: ''
    },
   _create: function () {
       var self = this;
       this._bindSelect2(this.options.element, this.options.placeHolder,
       this.options.action);          
    },
   _bindSelect2: function (element, placeHolder, action) {
       $(element).select2(
      {
       placeholder: placeHolder,
       multiple: true,
       ajax: {
        url: action

        }

    }

    );

     } 

 });

Answer 1

Figured out why, apparently I had the same id for every select option...silly me.