Bootstrap Collapse Panel with dynamic ID not working

Question

I have a page with panels which are made dynamically with PHP. Per made project a new panel is made. But when I wanted to open one of those panels, only the first one opened. So I retrieve the ID from the database and want to use this as ID for my panels.

When I inspect one of the panels, it shows me #5 which is one of the ID's from the database.

But unfortunately this way won't work and I don't know why. Can someone please take a look at it and help me in the good direction? Here is my code:

<?php

$sql = "SELECT * FROM project";
$result = mysqli_query($db,$sql);
while($row = mysqli_fetch_array($result)){
    $id = $row['id'];
    $panelid = "#$id";?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="faqhead">
            <h4 class="panel-title">
                <?php
                echo '<a role="button" data-toggle="collapse" data-parent="#accordion" href="'. $panelid .'" aria-expanded="false" aria-controls="collapseOne">';
                echo $row['projectname'];
                echo '</a>';
                ?>
            </h4>
        </div>
        <?php echo '<div id="'. $panelid.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">'; ?>
            <div class="panel-body" id="faqpanel">
                <h1 class="">Taken
                    <small>
                        <a role="button" data-toggle="modal" data-target="#newtask"><span class="glyphicon glyphicon-plus project" style="color:#000;"></span></a>
                    </small>
                </h1>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th style="width: 5%;"></th>
                        <th style="width: 5%;">Taak ID</th>
                        <th style="width: 10%;">Taak naam</th>
                        <th style="width: 20%;">Omschrijving</th>
                        <th style="width: 10%;">Start datum</th>
                        <th style="width: 10%;">Einddatum</th>
                        <th style="width: 30%;">Notities</th>
                        <th style="width: 10%">Duur</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php } ?>  

Update:

Answer 1

don't use only numbers for id this will not work. use some text and the concat id e.g colapse_1, colapse_2

<?php

$i = 1;
while($i < 5){
    $id = $i;
    ?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="faqhead">
            <h4 class="panel-title">
                <?php
                echo '<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse_'. $id .'" aria-expanded="false" aria-controls="collapseOne">';
                echo $id;
                echo '</a>';
                ?>
            </h4>
        </div>
        <?php echo '<div id="collapse_'. $id.'" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">'; ?>
            <div class="panel-body" id="faqpanel">
                <h1 class="">Taken
                    <small>
                        <a role="button" data-toggle="modal" data-target="#newtask"><span class="glyphicon glyphicon-plus project" style="color:#000;"></span></a>
                    </small>
                </h1>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th style="width: 5%;"></th>
                        <th style="width: 5%;">Taak ID</th>
                        <th style="width: 10%;">Taak naam</th>
                        <th style="width: 20%;">Omschrijving</th>
                        <th style="width: 10%;">Start datum</th>
                        <th style="width: 10%;">Einddatum</th>
                        <th style="width: 30%;">Notities</th>
                        <th style="width: 10%">Duur</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<?php $i++; } ?>