Ember - Multiple Select to Add in list

application.adapter.js

export default DS.FixtureAdapter.extend({});

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
 
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model:function () {
    return this.store.find('group', 1);
  },
  afterModel: function () {
    return this.store.findAll('link').then((result) => {
      this.set('links', result);
    });
  },
  setupController: function(controller, model){
    controller.set('model', model);
    controller.set('allLinks', this.get('links'));
    this._super(controller, model);
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

<h2>Top Links</h2>
        {{multiselect-div tLeft="Available Links" tRight="Selected Links" items=allLinks selected=model.toplinks label="link_name" }}
<div style="clear:both"></div>
<div>Pure Selected</div>

  {{#each model.toplinks key="id" as |item|}}
          <label >{{item.id}}. {{item.link_name}}</label>
      {{/each}}
      
      

<h2>Right Links</h2>
        {{multiselect-div tLeft="Available Links" tRight="Selected Links" items=allLinks selected=model.rightlinks label="link_name" }}
<div style="clear:both"></div>
<div>Pure Selected</div>
  {{#each model.rightlinks key="id" as |item|}}
          <label >{{item.id}}. {{item.link_name}}</label>
      {{/each}}
<br>
<br>

models.group.js

import DS from 'ember-data';

var group =  DS.Model.extend({
  group_name: DS.attr('string'),
  toplinks: DS.hasMany('link', {inverse: null, async: true}),
  rightlinks: DS.hasMany('link', {inverse: null, async: true})
});

group.reopenClass({
    FIXTURES: [
      { id: 1, group_name: 'Webmaster', toplinks: [1,2], rightlinks: [3,4]},
      { id: 2, group_name: 'Employee', rightlinks: [3,4]}
    ]
});

export default group;

models.link.js

import DS from 'ember-data';

var link =  DS.Model.extend({
  link_name: DS.attr('string'),
  link_url: DS.attr('string')
});

link.reopenClass({
    FIXTURES: [
      { id: 1, link_name: 'Home', link_url: '' },
      { id: 2, link_name: 'About', link_url: 'about'  },
      { id: 3, link_name: 'FAQ', link_url: 'faq'  },
      { id: 4, link_name: 'Contact', link_url: 'contact' }
    ]
});

export default link;

multiselect-div.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,
  selected: null,
  label: null,

  _items: null,
  _selected: null,

  init() {
    this._super(...arguments);
    this._items = Ember.A();
    this._selected = Ember.A();
  },
  prepare: function () {

    var items = this.get('items');
    var selectedItems = this.get('selected');

    items.forEach((item) => {

      var objNew = Ember.Object.create({
        id: item.get('id'),
        display_name: item.get(this.get('label')),
        hidden: ''
      });
    if (selectedItems.isAny('id', item.get('id'))) {
        //console.error(item.get('id'));
        objNew.set('hidden', 'hidden');
      }
     
      this.get('_items').pushObject(objNew);
    });


    var sItems = this.get('selected');
    sItems.forEach((item) => {

      var objNew = Ember.Object.create({
        id: item.get('id'),
        display_name: item.get(this.get('label')),
        selected: ''
      });

      this.get('_selected').pushObject(objNew);
    });


  }.on('didInsertElement'),

  actions: {
    addItemToGroup: function (item) {

      this.get('_selected').pushObject(item);
 
      let originalItems = this.get('items');
      originalItems.forEach((OI) => {
        if (OI.get('id') === item.get('id')) {
          item.set('hidden', 'hidden');
          this.get('selected').pushObject(OI);
          return true;
        }
      });
    },
    removeItemFromGroup: function (item) {
      let fakeItems = this.get('_items');
      fakeItems.forEach((FI) => {
        if (FI.get('id') === item.get('id')) {
          FI.set('hidden', '');
          return true;
        }
      });

     
      let _selectedItems = this.get('_selected');
      _selectedItems.removeObject(item);

      
      let selectedItems = this.get('selected');
      selectedItems.forEach((SI) => {
        if (SI.get('id') === item.get('id')) {
          this.get('selected').removeObject(SI);
          return true;
        }
      });

    }
  }
});

multiselect-div.template.hbs

<div style="width: 50%; float: left">
    <h3>{{tLeft}}</h3>

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

</div>

<div style="width: 50%; float: left">
    <h3>{{tRight}}</h3>

    <div class="removeTags">
      {{#each _selected key="id" as |item|}}
          <label {{action 'removeItemFromGroup' item}}>{{item.id}}. {{item.display_name}}</label>
      {{/each}}
    </div>
</div>
{{yield}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
label{border: 1px solid black; margin: 4px 10px; padding: 4px 10px; cursor: pointer; display: block}
.hidden{display: none;}

twiddle.json

{
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}