ember multiple component with various id

i has a component in ember i named it foo

import Ember from 'ember';
var data, elTop;
export default Ember.Component.extend({
  init(){
    this._super(...arguments);
  },
  didInsertElement(){
    this._super(...arguments);
    data = this.get('id');
    elTop = $('#'+data).offset().top;
    console.log(elTop);
  }
});

btw, i using this component twice in parent template and the position of each component is diferent, but why when iam console log the offset top the value its same.

can anyone explain this and solved it? and i avoid using this console.log($('#'+data).offset().top) its work but show glitch when i using on scroll event.

thankyou :)

You need to introduce properties elTop data inside the component.
You can access the component dom using this.$

import Ember from 'ember';
export default Ember.Component.extend({
    data: '',
    elTop: '',
    didInsertElement() {
        this._super(...arguments);
        elTop = this.$().offset().top;
        console.log(elTop);
    }
});