How to make a Loop work inside another Loop in the same code

I'm trying to list two categories registered in the DB in the "CATEGORY" table, as shown below:

Category Table

ButwheneverIenablethepage"pag_apresentacao.php" where the products are ready, the category list is limited to only the category "Pivoting Ports", ignoring the other one with the name " ", and bringing me all the products registered in the Table" PRODUCTS "as shown below:

WhenIdisablethe"pag_apresentacao.php" page , the two categories are shown, but none of the products listed in the products table are listed, when any of the categories are selected. >

I ask friends, a tip on how to get me to list the two categories, and bring only the products for the selected category.

Below I'm posting the codes I'm using:

Listing the Categories:

<!-- Listando os Categorias -->
<?php
$codigo = $_POST['codigo'];
$nome_cat = $_POST['nome_cat'];
$imagem = $_POST['imagem'];
$query = mysql_query("SELECT * FROM categoria");
while($res = mysql_fetch_array($query)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="cats-list">
    <a class="cat-link" href="javascript:;" title="<?php echo $res['nome_cat']; ?>">
        <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_cate/<?php echo $res['imagem']; ?>" width="100" title="<?php echo $res['nome_cat']; ?>" />
    </a>
    <div style="background:#2f2140; margin-left:-300px; width:880px;z-index:999;border-radius:25px;" class="single-cat">
        <h1 align="center" style="width:830px; margin-top:-40px;"><?php echo $res['nome_cat']; ?></h1>
        <div style="margin-left:357px;width:50px;" class="cat-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
        </div>
<!-- Listando os Produtos por Categoria -->
<?php include "pag_lista_produtos.php"; ?>                  
    </div>
</div>
<?php
}
?>

Listing Products by Selected Category: "pag_list_products.php"

<!-- Listando os produtos -->
<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$imagem = $_POST['imagem'];
$titulo = $_POST['titulo'];
$descricao = $_POST['descricao'];
$query = mysql_query("SELECT * FROM produtos");
while($res = mysql_fetch_array($query)){
?>
<div style="float:left; width:112px; height:133px; padding:2px 10px;" id="songs-list">
    <a class="song-link" href="javascript:;" title="">
        <img style="position:relative; top:50%; transform:translateY(-50%);" src="img_prod/<?php echo $res['imagem']; ?>" width="100" title="<?php echo $res['titulo']; ?>" />
    </a>
    <div style=" margin-top:120px;z-index:999;border-bottom-right-radius:25px;border-top-right-radius:25px;" class="single-song">
        <div style="width:50px;margin-left:300px;" class="song-links">
            <a class="close-btn" href="javascript:;" title="Voltar">
                <img src="img/fechar.jpg" />
            </a>
            <div class="song-sides">
                <img style="margin:40px 0 0 -142px;" src="img_prod/<?php echo $res['imagem']; ?>" width="369" />
            </div>
        </div>
        <h1> <?php echo $res['titulo']; ?> </h1>
        <div class="entry" style="overflow-y: hidden; padding: 0px; width: 100px; background:#fff;">
            <p style="font-family:Verdana, Geneva, sans-serif; size:14px; font-weight:bold; color:#ccc;">
            <?php echo nl2br($res['descricao']); ?>
            </p>
            <div class="jspContainer" style="width: 100px; height: auto;">
            <div class="jspPane" style="padding: 0px; top: 0px; width: 100px;">
            </div></div></div>
            <span class="song-sides left-side"></span>
        </div>
    </div>
<?php
}
?>

I will be very grateful if friends can help me solve these problems.