for sharing on https://embercommunity.slack.com/messages/general/stars/

application.hbs

{{multiselect-div items=allLinks selected=model.topLinks}}
{{multiselect-div items=allLinks selected=model.rightLinks}}

component.js

import Ember from 'ember';
export default Ember.Component.extend({

  tLeft: 'Select', // title for left element
  tRight: 'Selected', // title for right box

  items: null, // links
  selected: null, // selected links will go here

  label: null,

  actions: {
    addItemToGroup: function (item) {
      var selected = this.get('selected');
      selected.pushObject(item);

      item.set('hidden', 'hidden');

    },
    removeItemFromGroup: function (item) {
      var selected = this.get('selected');
      selected.removeObject(item);

      item.set('hidden', '');

    }
  }
});

component_template.hbs

<div class="small-40 medium-20 columns end ">
    <h3>{{tLeft}}</h3>

    <div class="availableTags">
      {{#each _items key="id" as |link|}}
          <label class="{{link.hidden}}" {{action 'addItemToGroup' link}}>{{link.name}}</label>
      {{/each}}
    </div>

</div>

<div class="small-40 medium-20 columns end">
    <h3>{{tRight}}</h3>

    <div class="removeTags">
      {{#each selected key="id" as |link|}}
          <label {{action 'removeItemFromGroup' link}}>{{link.name}}</label>
      {{/each}}
    </div>
</div>