How to display properties for each product?

Question

1C-Bitrix

Hello!
Please advise, I just can’t understand the logic of building a function and, accordingly, I can’t figure out how to wrap it in code. Lack of experience affects:)
The task such.
There is a catalog page in Bitrix CMS. It displays elements. Each element has a function button or property. For example, the ID of the element itself. It is not so important what exactly, it is important to understand the idea.
The elements of the catalog are presented in the form of a table. Each property belonging to an element is output as =$arElem[ID] or =$arElem[PICTURE].
In the main table of the catalog, I create a button, when clicked, a pop-up window should appear in which, for example, the ID of the product opposite which the button was clicked will be written. In fact, it turns out that the pressed button causes only the ID of the first element for everyone, no matter which element of the catalog you click on.
It looks something like this https://ev-group.ru/kassy/
In the table, I embed a JS button that opens a window containing a layer with =$arElem[ID] or the like. I need to force it to display exactly its own ID for each element :) I don’t understand how to do this.
Help me please!
P.s. In general, I understand the reason for the error. But I do not understand how to make each button pick up its own ID. After all, the catalog is everywhere of different lengths and, accordingly, it is trivial to call the property by number every time.

Answer 1

add a data attribute to each button

Answer 2

Thanks to all who are interested :) The solution was found unexpectedly, similar to the solution proposed by Alexander.
As a result, I took and assigned calculated values ​​to all divs in the window based on <?=$arElement["ID"]?> - for example 1<?=$arElement["ID"]?> , 2<?=$arElement[" ID"]?> . Values ​​corresponding by itself. It turned out that each row of the table formed a unique ID. And there JS zafurychil)