Problems passing ID to MODAL window

I have a page with a table that lists the necessary information and in it several buttons like delete, change, display. The problem is that when I click on visualize (it calls the MODAL) it should list a detailed information regarding that selected record, however I have a problem regarding the passage of the id to make the query and present it on the screen.

Follow the code below:

<?php include ("cabecalho.php");?>
<?php include ("conexao.php");?>
<?php include ("funcoesBD.php");?>


<?php
//verificaUsuario();
if(isset($_POST['submit'])){
  $nome = $_POST['nome'];
  $produtos = buscaProdutoNome($conexao, $nome);

}else{
  $produtos = listaProdutos($conexao);
}


?>

<form action="consulta-produto.php" method="post">
  <td>
    <label  for="nome">Nome:</label>  
    <input  type="text" name="nome">
  </td>

  <button type= "submit" name="submit" style="border-radius: 3px; width: 80px; height: 30px;"><b>Pesquisar</b></button>
</form>


<div class="table-wrapper">
<table class="table table-hover">

  <thead >
    <tr>
      <th style="display: fixed;">Nome</th>
      <th>Preco</th>
      <th>Cor</th>
    </tr>
  </thead>

  <?php
    foreach($produtos as $produto) :
  ?>

  <tbody>
    <tr>
      <!--<td><?= $produto['id'] ?></td>-->
      <td><?= $produto['nome'] ?></td>
      <td><?= $produto['preco'] ?></td>
      <td><?= $produto['cor'] ?></td>

      <td>
        <a class="btn btn-primary" href="form-altera-produto.php?id=<?=$produto['id']?>">Alterar</a>
      </td>

      <td>
        <input type="hidden" name="id" value="<?=$produto['id']?>">
        <button value="<?=$produto['id']?>" type="submit" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Visualizar</button>
      </td>

      <td>
        <form action="deleta-produto.php" method="post">
          <input type="hidden" name="id" value="<?=$produto['id']?>">
          <button class="btn btn-danger confirmation-callback" onclick="return (window.confirm('Certeza que deseja remover?'));">Remover</button>
        </form>
      </td>

    </tr>  
  </tbody>



  <?php
    endforeach;
  ?>

</table>



<!-- MODAL -->

<?php 
  $id = $produto['id'];
  echo $id;
  $produtos = buscaProduto($conexao, $id);
?>
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Informaçoes de Produto</h4>
      </div>
      <div class="modal-body">
        Nome: <?= $produtos['nome'] ?><br> 
        Preço: <?= $produtos['preco'] ?><br>
        Cor: <?= $produtos['cor'] ?><br>
        Peso: <?= $produtos['peso'] ?><br>
        Tamanho: <?= $produtos['tamanho'] ?><br>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Voltar</button>
      </div>
    </div>
  </div>
</div>
<!--FIM MODAL -->

<?php $totalPagina = paginacao($conexao);

echo "<ul class= pagination pagination-large>
        <li><a href = consulta-produto.php >Primeira Pagina</a></li>
      </ul>";
echo "<ul class= pagination pagination-sm>
        <li><a>...</a></li>
      </ul>";

for($i = 1; $i <= $totalPagina; $i++){

    echo "<ul class= pagination pagination-large>
            <li><a href = \"?pagina=$i\">$i</a></li>
          </ul>";
}

echo "<ul class= pagination pagination-large>
        <li><a>...</a></li>
      </ul>";


echo "<ul class= pagination pagination-large>
        <li><a href = \"?pagina=$totalPagina\">Ultima Pagina</a></li>
      </ul>";
?>

</div>

<?php include ("rodape.php");?>

<?php 



?>

I have tried to pass via POST, put the value in the button as it is there, but it always brings me the last ID, in case the last one on each page, since 5 records are listed per page.