Multiple Bootstrap carousels with php

Question

I'm trying to make multiple bootstrap carousels with images from my database. The problem is, the first one works fine, I can go right and left between my images, everything works fine. But I can't do anything on the second carousel. If I click the arrows, nothing happens. I don't understand why the first one works only. Here's my code:

<div id="imageGallery" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
        <?php
        $i = 0;
        foreach ($data as $rec) {
            $actives = '';
            if ($i == 0) {
                $actives = 'active';
            }
        ?>
            <li data-target="#imageGallery" data-slide-to="<?php echo $i; ?>" class="<?php echo $actives; ?>"></li>
        <?php
            $i++;
        }
        ?>
    </ul>

    <!-- The slideshow -->
<div class="carousel-inner">
    <?php
    $i = 0;
    foreach ($data as $rec) {
        $actives = '';
        if ($i == 0) {
            $actives = 'active';
        }
    ?>
        <div class="carousel-item <?php echo $actives ?>">
            <a href="#<?php echo $rec['id'] ?>" data-toggle="modal" data-target="#<?php echo $rec['id'] ?>">
                <img src="<?php echo $rec['thumbnailimage'] ?>" class="img-fluid" id="thumbnailimage">
            </a>
        </div>



    <?php $i++;
    } ?>
</div>

Answer 1

Just figured it out. I had to put each modals id after 'imageGallery' and it works fine now.

<div id="imageGallery<?php echo $row['id']; ?>" class="carousel slide" data-ride="carousel">