Variable becomes undefined variable in PHP template

Question

Currently, I have an issue returning output values to the PHP template because I get an error saying that the variable is undefined when it is actually defined. I have an index.html.php template that holds all of the HTML and should print the $output variable values in the main section.

    <main>
    <div class="container">
        <?=$output?>
    </div>
</main>

Meanwhile, in my index.php file $output is set to ob_get_clean() of a products.html.php file (see it below);

 <?php

try {
    //Connect to the database
    $pdo = new PDO ('mysql:host=localhost;dbname=scandiweb;charset=utf8', 'root', '');
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $sql = 'SELECT * FROM `products`';
    $products = $pdo->query($sql);
    $title = 'Product list';

    //Starts output buffer.
    ob_start();
    include __DIR__ . '/../templates/products.html.php';

    //Stores contents of output buffer into a variable
    $output = ob_get_clean();

} catch (PDOException $e) {
    $title = 'An error has occurred';
    $error = 'Database error: ' . $e->getMessage() . ' in ' . $e->getFile() . ':' . $e->getLine();
}

include __DIR__ . '/../templates/index.html.php';

and in products.html.php I loop through the SQL returned data, which should be stored in $output variable:

<?php foreach ($products as $product): ?>
        <div class="card my-2">
            <div class="card-body">
                <p class="card-text text-center"><?php echo htmlspecialchars($product['sku'], ENT_QUOTES, 'UTF-8') ?></p>
                <p class="card-text text-center"><?php echo htmlspecialchars($product['name'], ENT_QUOTES, 'UTF-8') ?></p>
                <p class="card-text text-center"><?php echo htmlspecialchars($product['price'], ENT_QUOTES, 'UTF-8') . '$'?></p>

                <?php if (!is_null($product['size'])): ?>
                <p class="card-text text-center"><?php echo 'Size: ' . htmlspecialchars($product['size'], ENT_QUOTES, 'UTF-8') . ' MB'?></p>
                <?php endif; ?>

                <?php if (!is_null($product['dimensions'])): ?>
                <p class="card-text text-center"><?php echo 'Dimensions: ' . htmlspecialchars($product['dimensions'], ENT_QUOTES, 'UTF-8')?></p>
                <?php endif; ?>

                <?php if (!is_null($product['weight'])): ?>
                <p class="card-text text-center"><?php echo 'Weight: ' . htmlspecialchars($product['weight'], ENT_QUOTES, 'UTF-8') . ' KG'?></p>
                <?php endif; ?>
                <form action="deleteproducts.php" method="post" class="text-center" id="deleteForm">
                    <input type="checkbox" name="checkbox[]" class="text-center" value="<?=$product['sku']?>"> 
                </form>
            </div>
        </div>
<?php endforeach; ?>

However, in the end, when I test the index.php page, I get the error saying that the $output variable is undefined when it should be returning the results of a foreach loop. I have built another project using the same structure and everything worked fine, however, can't find the issue here of why the variable is undefined.