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 :)