Page according to the clicked Product ID (JAVASCRIPT)

I am trying to get the ID of the button which is a variant and throw it on another page to perform a fetch API. It's just that this button is done automatically, it depends on how many purchases you have in the client's cpf, if you have 2 purchases, there will be two buttons.

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

Then when I click the button, it should point to another page, and it should get the id of the button clicked, but when I click the button, it is taking the last ID of the product purchased from the client, not that id that I I clicked.

First js of page1:

                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 name of the product, its status and mount the button with the id of the product.

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

In the code:

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

I get the product ID.

When I click the button it will go to 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}');

            })
        })
    )

}

takes the product ID, but is not taking the id of the clicked product, but always the last ID of all the products the customer has. strong>

Is there any way I can solve this problem?