Как повесить на много элементов одно событие jquery?

Question

[Queen2]

У меня есть много карточек и мне нужно что бы при нажатии на карточку мне возвращалась расстояние от карточки до верхней части экрана и высота до верхней части документа.
Мне же возвращается высота до верхней части документа и еще раз высота до верхней части документа.
Протестировал это на одном элементе (а не с массивом карточек) и там все возвращает как надо, думаю что не правильно задаю слушатель на элементы (c jquery плохо знаком)
Подскажите правильно это сделать, либо поделитесь ссылкой на решение.

jQuery( ".product-item").on( "click", function(event) {
    let offset = 0;
    let position = 0;
    let result = 0;
    offset = jQuery( this ).offset().top;
    position = jQuery( this ).position().top;
    alert('offset = '+ offset + '  position = ' + position );
});

Comments

[maksam07]

Со слушателем все в порядке. Тег вордресса здесь не к месту.

[Beliyadm]

По идее так

position = $( this ).offset().top - $(window).scrollTop();

https://codepen.io/beliyadm/pen/oNmQzdy - если есть вертикальная прокрутка - координаты будут соответственно разные