Optimize Foreach inside another Foreach PHP/Javascript

Question

I need to optimize this code:

<div class="temporadas">
    <?php $i = 0;
    foreach ($temporadas as $temporada) {
        $i++; ?>
        <div data-id="<?= $temporada['temporada']; ?>" class="temporadaBox" onclick="temporadaTab(<?= $temporada['temporada']; ?>)">
            <span class="temporada">
                Temporada <?= $temporada['temporada']; ?>
                <?= (!empty($temporada['nome']) ? '- '.$temporada['nome'].'' : ''); ?>                          
            </span><img id="arrow<?= $temporada['temporada']; ?>" <?= (($i == 1) ? 'class="arrowDown"' : 'class="arrowLeft"'); ?>>
        </div>          
        <div class="temporadaContainer" id="temporadaContainer<?= $temporada['temporada']; ?>" <?= (($i == 1) ? '' : 'style="display:none;"'); ?>>
            <?php foreach ($episodios as $episodio) {
                if ($episodio['temporada'] == $temporada['temporada']) { ?>           
                    <div class="item" data-id="<?= $episodio['episodio']; ?>">
                        <a href="<?= $config['site_url']; ?>/<?= (($temporada['hidden_temporada'] == 1) ? $temporada['url_anime'] : $temporada['url_temporada']); ?>/episodio-<?= encodeInt($episodio['episodio']); ?>/">
                            <img src="<?= $config['site_url']; ?>/images/background_episodios/<?= $episodio['url_anime']; ?>/small/t=<?= $episodio['temporada']; ?>&ep=<?= $episodio['episodio']; ?>.jpg"/>
                            <div class="blank"></div>
                            <div class="titulo">
                                <span class="description"><u>Episódio <?= $episodio['episodio']; ?></u><?= ((!empty($episodio['titulo'])) ? " - ".$episodio['titulo']."" : ""); ?></span>
                                <span class="date"><?= ucfirst(strftime('%b. %d, %Y', $episodio['data'])); ?></span>
                            </div>
                        </a>
                        <div class="clearfix"></div>
                    </div>
                <?php } ?>
            <?php } ?>
        </div>
    <?php } ?>
</div>

Explaining the code, $temporadas have about 20 rows, and $episodios have about 1000 rows.. I need to put each episodio with temporadaID inside current temporada container..

The problem as you can see, is that if we have 20 rows of $temporada and 1000 rows of $episodio, we will loop 20,000 times.

I though in leave $episodio foreach outside $temporada, and organize the episodios with Javascript after complete the loop, however i have no idea how to do it..

Someone could help me? I appreciate, thank you!!

**UPDATE with the data that i get from MySQL:

$episodios = apcu_fetch("anime_episodios_".$get_anime['id']."");
if(!$episodios) {
    $episodios = $SQL->query("SELECT * FROM episodios WHERE url_anime = '".$get_anime['url_nome']."' order by episodio asc")->fetch_all(MYSQLI_ASSOC);
    apcu_store("anime_episodios_".$get_anime['id']."", $episodios, 0);
}

$temporadas = apcu_fetch("anime_temporadas_".$get_anime['id']."");
if(!$temporadas) {
    $temporadas = $SQL->query("SELECT * from temporadas WHERE url_anime = '".$get_anime['url_nome']."' order by temporada asc")->fetch_all(MYSQLI_ASSOC);
    apcu_store("anime_temporadas_".$get_anime['id']."", $temporadas, 0);
}