Page according to the clicked product ID (JAVASCRIPT)

Question

I’m trying to get the ID of the boot which is a various rival and play on another page to perform a fetch API. Only this button is done automatically, it depends on how many purchases have in the customer’s Cpf, if there are 2 purchases, will be two buttons.

There for each button will be generated an id of the button automatically, which will be the id of the product that is in the database.

Then when I click on the button, it should direct to another page, and should get the id of the button clicked, but when I click on the button, it’s taking the last ID of the product purchased from the customer, and not that id I clicked on.

First js of page 1:

                var names = [];
                names[0] = element.ID;
                localStorage.setItem("names", JSON.stringify(names));

             $('.produto-1').append(`<div class="col-xs-6 col-sm-4 col-lg-12">
             <div class="thumbnail">
                 <div class="caption">
                     <h3>${element.PRODUTO}</h3> <img class="fon" src="img/icon/guido.ico"/>
                     <p class="flex-text text-muted">${element.STATUS}</p>
                     <br>
                        <p><a class="btn btn-primary m" type="button" id="${element.ID}" value="${element.ID}" onClick="${element.ID}" href="progress.php">Acompanhar Pedido</a></p>                           
                        </div>
             </div>
         </div>`);

I created this class produto-1 to create the message showing the product name, its status and mount the button with the product id.

So if you happen to have 2 products, this is automatically creating there in this code.

In the code:

var names = [];
names[0] = element.ID;
localStorage.setItem("names", JSON.stringify(names));

I get the product ID.

When you click the button you will direct to the page2 and in it I have the following js:

    function Progress() {

    var storedNames = JSON.parse(localStorage.getItem("names"));
    console.log(storedNames);

      jQuery.support.cors = true;

            //  Default options are marked with *
             fetch('http://API_AQUI', {
                 method: 'POST',
                 headers: {'Content-Type':'application/x-www-form-urlencoded'},
                 body: `ID=${storedNames}`

             }).then(response => response.json().then(data => ({
                 data: data,
                 status: response.status
             })
             ).then(res => {
                 res.data.map(element => {
                     var text = element;
                     console.log(text);

                     $('.progresso-1').append(`${element.NOME}`);
                     $('.progresso-2').append(`${element.PRODUTO}`);
                     $('.progresso-3').append(`${element.CPF}`);
                     $('.progresso-4').append(`${element.CIDADE}`);
                     $('.progresso-5').append(`${element.ENTREGAPREVISTA}`);
                     $('.progresso-6').append(`${element.CODPRODUTO}`);
                     $('.progresso-7').append(`${element.CODCLIENTE}`);
                     $('.progresso-8').append(`${element.ENTREGAPROGRAMADA}`);
                     $('.progresso-9').append(`${element.NOTAFICAL}`);
                     $('.progresso-10').append(`${element.QTDPEDIDO}`);
                     $('.progresso-11').append(`${element.ENTREGACONFIRMADA}`);
                     $('.progresso-12').append(`${element.MONTAGEMPREVISTA}`);
                     $('.progresso-13').append(`${element.MONTCONFIRMADA}`);

            })
        })
    )

}

The var storedNames = JSON.parse(localStorage.getItem("names")); picks up the product ID, but is not picking up the clicked product id, but always the last ID of all products the customer has.

Is there any way I can solve this problem?