Lukmann

obj[counter] = first
https://www.tutorialrepublic.com/faq/how-to-dynami...

Свойство обьекта MouseEvent offsetX возвращает дельту между координатой X начала элемента, на который указывает курсор, и координатой X самого курсора. Отсюда и "поломка".
Если хотите брать координату относительно всего документа, то берите pageX
Если же хотите делать что-то с конкретным элементом, то это вам в сторону ивента mouseover и свойства relatedTarget (можно получить позицию элемента относительно документа методом getBoundingClientRect)

1. взять id из дата-атрибута: let id = +this.dataset['product-id'] с плюсом, чтобы не строка, а число было - т.к. в массиве где искать id – числа.
   
2. найти элемент: breadProduct.find((el) => el.id === id)
   

function watchAboutProduct(){
  let id1 = $(this).attr('product-id');
  let product = breadProduct.find(product => product["id"] === id1);
}

А лучше breadProduct превратить в объект в котором ключи будут id-шниками. Если продуктов ожидается много и искать придется часто. Тогда поиск упростится до breadProduct[id1].

1. CSS: блоку с текстом задать max-height;
2. JS: при определенной высоте этого блока показать кнопку;