Generate automatic api sequence when clicking the specific product

I have a customer portal, and in this customer portal will have a "my purchases" page there will show the products purchased, and when you click on it will appear the "tracking" of this product with various information. I do this with data from an API.

HTML of the "my purchases" page:

    <div class="container">
<div class="flex-row row">


    <div class="col-xs-6 col-sm-4 col-lg-4" id="produtoUm">
        <div class="thumbnail">
            <div class="caption">
                <a href="postagem.php" ><h3 class="produto"></h3> </a>
                <p class="flex-text text-muted status"></p>

<br>
        <p><a class="btn btn-primary" id="myButton" onclick="myButton">Acompanhar Pedido</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>

    <!-- <div="teste"></div>
      <a class="btn btn-info" onclick="Enviar1()" role="button">Acompanhar Pedido</a> -->

    <div class="col-xs-6 col-sm-4 col-lg-4" id="produtoDois">
        <div class="thumbnail">
            <div class="caption">
                <a href="postagem.php" ><h3 class="produtoDois"></h3> </a>
                <p class="flex-text text-muted statusDois"></p>
                <br>
                        <p><a class="btn btn-primary" id="myButton" onclick="myButton">Acompanhar Pedido</a></p>
            </div>
            <!-- /.caption -->
        </div>
        <!-- /.thumbnail -->
    </div>

The product will be placed there automatically by the api These buttons I made to go to the "screening" page of the product, but as I said, always show only 1 product, not the product that was clicked

HTML da página de rastreio:

    <div class="container">
           <div class="table-responsive">
               <table class="table table-status">
                   <thead>
                       <tr class="status">
                          <th class="thCenter">Status:</th>
                          <!-- <td id="info-status">ENTREGUE</td> -->

                       </tr>
                   </thead>
             </table>
           </div>
</div>

<div class="container" id="oi">
  <div class="table-responsive">
      <table class="table">
          <thead>
                  <tr class="nome" id="testa">
                      <th class="thCenter ">Nome</th>
                      <!-- <td id="info-nome">THIAGO</td> -->

                  </tr>
                  <tr class="cpf tata">
                      <th class="thCenter">CPF</th>
                      <!-- <td>02798477425</td> -->

                 </tr>
                 <tr class="produto">
                      <th class="thCenter">Produto</th>
                      <!-- <td>COLCHAO GAZIN SUPREME COMPOSTO 138X188X21CM 1PL 660120 ./PR</td> -->

                </tr>
                <tr class="cidade">
                      <th class="thCenter">Cidade</th>
                      <!-- <td>MACEIO</td> -->
                </tr>
                <tr class="codproduto">
                     <th class="thCenter">Código do Produto</th>
                     <!-- <td>12819009</td> -->

               </tr>
               <tr class="codcliente">
                     <th class="thCenter">Código do Cliente</th>
                     <!-- <td>12819009</td> -->
               </tr>

                 <!-- Tabela adicionada apenas para mudar a cor do caminhão (table invisible) -->
               <tr class="cliente sr-only">
               <th class="thCenter">Quantidade</th>
               <!-- <td id="info-qtd">1</td> -->
         </tr>
              </thead>
        </table>

    </div>
</div>

Code to pull the api:

var endereco = 'http://apiaqui';

$.ajax({
    url: endereco,
    crossDomain: true,
    complete: function(res){
        var meuJSON = JSON.parse(res.responseText);

        var a = [meuJSON];

        a.forEach(function(element) {
            console.log(element);
            for (var i = 0; i < 1; i++) {
                element[i]

                var adiciona = element;
                AdicionaNome(adiciona[i]);
                AdicionaCPF(adiciona[i]);
                AdicionaProduto(adiciona[i]);
                AdicionaCidade(adiciona[i]);
                AdicionaCodigoProduto(adiciona[i]);
                AdicionaCodigoCliente(adiciona[i]);
                AdicionaStatus(adiciona[i]);
                ActiveStatusImage(adiciona[i]);
                ActiveOnlyPostagem(adiciona[i]);
                adicionaClienteNaTabelaViagem(adiciona[i]);
                ActiveQtdViagem(adiciona[i]);

           }
        });
    }

});

And so on the page when he clicks on the product of "my purchases" will appear the data of the customer and that specific product. But how do I do when I click on a certain product on the "my purchases" page only the data of this product appears, and not another? When I do

AdicionaNome(adiciona[0]);
AdicionaCPF(adiciona[0]);
AdicionaProduto(adiciona[0]);

Show only data that is in sequence 0. Would I have a more practical way of doing this without having to make multiple pages with each product sequence?