Optimize Foreach inside another Foreach PHP/Javascript

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!!