Setting value for specific ember component

I've made a component that copies some code from a code box. The component javascript looks like:

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'code',
  classNames: ['lm-code-box'],
  dataTarget: null,
  dataTrigger: Ember.computed('dataTarget',
    function() {
      return `.${this.get('dataTarget')}`;
    }
  ),
  copyAction: null,
  icon: 'ion-code',
  copyStatus: null,
  buttonText: 'Copy',
  didInsertElement() {
    this.clipboard = new Clipboard('.lm-button--copy');

    this.clipboard.on('success',(e) => {
      this.set('icon','ion-checkmark');
      this.set('copyStatus','success');
      this.set('buttonText','Copied');
      e.clearSelection();
    });

    this.clipboard.on('error',(e) => {
      this.set('icon','ion-android-warning');
      this.set('copyStatus','error');
      this.set('buttonText','Error');
    });
  },
  willDestroyElement() {
    this.clipboard.destroy();
  }
});

Then in my template the code looks like:

{{#lm-code-copy dataTarget="testOne"
                        copyAction="copy"}}
    test one
{{/lm-code-copy}}
{{#lm-code-copy dataTarget="testTwo"
                        copyAction="copy"}}
    test two
{{/lm-code-copy}}

Everything copies fine, but in the block:

this.set('icon','ion-checkmark');
this.set('copyStatus','success');
this.set('buttonText','Copied');

changes those key values on both components that are rendered. How can I tell ember to only change the value for the current component? I assumed this would set that context but it doesn't seem to do the trick.