Using JCF options in multiple Select elements with Ember

country-list.hbs

{{#x-select class='input2-style' name='country' value=countryValue id='input2-select' }}
  {{#each-in countries as |code country|}}
    {{#x-option value=code}} {{country}} {{/x-option}}
  {{/each-in}}
{{/x-select}}

country-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['input2','country-list'],
  didRender() {
    Ember.run.later(function(){
      jcf.replace('#input2-select','Select');
    })
  }
});

currency-chooser.js

import Ember from 'ember';

export default Ember.Component.extend({
  /* it re-initiates the custom element after render */
  didRender() {
    jcf.replace('#currency-options','Select', {
      "wrapNative": false,
      "wrapNativeOnMobile": true
    });
  },
  actions: {
    update(value) {
      Ember.Logger.info("currency changed to " + value);
    }
  }
});

currency-choser.hbs

{#x-select value=currency class='light' id='currency-options' action='update'}}
  {{#x-option value='usd'}}USD{{/x-option}}
  {{#x-option value='eur'}}EUR{{/x-option}}
  {{#x-option value='rub'}}RUB{{/x-option}}
{{/x-select}}