How to make it automatically determine what data to take from the array. js, jquery?

Question

JavaScript

An abstract example to describe the mechanism:
There is an array with an indefinite amount of data. Data can be deleted/added (it doesn't matter).
arr = [{h1: 'Lorum 1',
p: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'},
{h1: 'Lorim 2',
p: 'Lorum ipsum dolor sit amet, consectetur adipisicing elit.'} ,
{... and so on}];
(array for example)

There is a template, let's say popup, which has and .
When you click on the first button, the data from the first element of the array is displayed. When you click on the second, from the second, etc.

The question itself:
How to make it so that, for example, when the user adds new data to the array, a new button appears that opens a popup with this data.
those. the button was bound to a specific element of the array, but at the same time, so that the path to this data was determined automatically.

Another example for understanding:
arr = [0, 1, 2, 3, ...]
when button1 is pressed, the data that is contained in the first element of the array is displayed. (I know that the countdown is from 0)
when button2 is pressed, the data contained in the second element of the array is displayed.
I add button3 (let's say in HTML) and when clicked, it should automatically display the data that is contained in the third element of the array.
etc.

I think it is clear what is required.
It is desirable to show in pure js how this can be implemented, or at least suggest in which direction to look.

Answer 1

How to make it so that, for example, when the user adds new data to the array, a new button appears that opens a popup with this data.
Attach the addition of a new button to your function for adding data to the array.
the button was bound to a specific element of the array, but at the same time, so that the path to this data was determined automatically.
if your buttons are ordered like the elements of the array, then through the event you take the index of the button and look for the element in the array by index. Something like this:

$('блок с кнопками').on('click','button',function(){
var curr_elem = arr[$(this).index()];
//дальше делаете, что вам нужно.
});

As for pure js, try it yourself =)