Listar dados do MySql no formato de TABELAS dentro das TABs Bootstrap

Caros, estou criando um sistema de listagem de produtos em que os mesmos sejam apresentados de acordo com sua categoria.

O sistema funciona da seguinte forma:

Os dados são cadastrados no BD "mercado" na tabela produtos contendo 4 campos (id, produto, categoria e preço) e as categorias são cadastradas na tabela categoria contendo 2 campos (id e categoria).

Na página produtos.php deve ser apresentado da seguinte forma:

As categorias são relacionadas em TABs e os produtos em Tabela, de acordo com sua categoria, ou seja se tenho a categoria "Bebidas" deve ser apresentado todas as Bebidas desta categoria na TAB Bebidas e assim por diante.

Porém não estou conseguindo fazer isso, só está sendo apresentado os produtos da primeira categoria e repetindo nas demais.

Segue o código que estou usando para construção:

Página Produtos.php

<div class="container">
 <h2>Lista de Produtos por Categoria</h2>
 <br><br>
 <?php include_once 'select_produtos.php'; ?>
 <ul class="nav nav-tabs nav-pills nav-justified">
 <?php echo $categorias_menu; ?>
 </ul>
 <div class="tab-content">
 <table class="table table-hover">
 <thead class="thead-dark">
 <tr>
 <th scope="col">Código</th>
 <th scope="col">Produto</th>
 <th class=" text-center" scope="col">Valor</th>
 </tr>
 </thead>
 <tbody>
 <?php
 echo $lista_produtos; //faz a chamada para a variável no arquivo "select_produtos.php"
 ?>
 </tr>
 </tbody>
 </table>
 </div>
 </div>

	Página Select_produtos.php

	 

<?php

include_once 'conexao.php';

$categorias_sql = "SELECT * FROM categorias ORDER BY id ASC";
$categorias_result = mysqli_query( $connect, $categorias_sql );
$categorias_menu = '';

$produtos_query = "SELECT * FROM produtos ORDER BY produto ASC";
$produtos_result = mysqli_query( $connect, $produtos_query ) or die ("database error:". mysqli_error($connect));
$lista_produtos = '';
$i = 0;

//EXIBIR O MENU - ABAS - DE CADA CATEGORIA
while ( $categorias = mysqli_fetch_array( $categorias_result ) ) {

	if ( $i == 0 ) {
 $categorias_menu .= '
 <li class="active">
 <a href="#' . $categorias[ "id" ] . '" data-toggle="tab" role="tab">' . $categorias[ "categoria" ] . '</a>
 </li>
 ';
 $lista_produtos .= '
 <div id="' . $categorias[ "id" ] . '" class="tab-pane fade in active">
 ';
	} else {
 $categorias_menu .= '
 <li>
 <a href="#' . $categorias[ "id" ] . '" data-toggle="tab" role="tab">' . $categorias[ "categoria" ] . '</a>
 </li>
 ';
 $lista_produtos .= '
 <div id="' . $categorias[ "id" ] . '" class="tab-pane fade">
 ';
	}
	$i++;
	//Verfica se existem produtos na tabela
	if(!mysqli_num_rows($produtos_result)) {
 $lista_produtos .= '<br>Produto não encontrado!';
	}else{
 //LISTANDO PRODUTOS NO FORMATO DE TABELA
 while ( $sub_row = mysqli_fetch_array( $produtos_result ) ) {
 if($sub_row['categoria_id'] == $categorias['id']){
 $lista_produtos .= '<tr>';
 $lista_produtos .= '<td class="text-uppercase">' . utf8_encode($sub_row[ "id" ]) . '</td>';
 $lista_produtos .= '<td class="text-uppercase">' . utf8_encode($sub_row[ "produto" ]) . '</td>';
 $lista_produtos .= '<td class="text-uppercase text-center">R$ ' . $sub_row[ "preco" ] . '</td>';
 }
 }
	}
}
$lista_produtos .= '<div style="clear:both">';
?>

	Onde está meu erro ou o que estou deixando de fazer aqui?

	Segue imagem da tela como quero que fique.

	 

	Obrigado.