尝试使用Bootstrap 5 Collapse。这段相同的程式码是从类似的网页复制而来，但是数据列并未展开以显示折迭（隐藏）的数据列。相反，我在浏览器主控台上收到上述错误。
浏览器的控制台底部有以下行（我可以单击最上面的一行来展开其余的行，看起来像附件中的图片）：

SyntaxError: The string did not match the expected pattern.
querySelector - index.js:64
e - index.js:64
(anonymous function) - collapse.js:317

如果我点击f符号后面的任何一行，浏览器会将我重定向到“Sources”（源代码）选项卡，指向Bootstrap的相关JS文件。
代码是-不是整个页面，这是施加：

<?php
    $x = 1;
    $leadingScore = -100;
    if (isset($leaderboard)) {
        foreach ($leaderboard as $score) {
            $pid = (string) $score['playerId'];
?>

            <div class="collapse">
                <tr data-bs-toggle='collapse' data-bs-target='#<?=$pid?>'>
                    <th scope="row">
                        <?php 
                            if ($leadingScore != $score['score'])
                                echo $x;
                                            
                        ?>
                    </th>

                    <td style="text-align: left;">

                        <?php echo $score['playerName']." (".$score['hcap'].")"; ?>
                                        
                    </td>
                    <td>
                        <?php 
                            echo $score['score'];
                            $leadingScore = $score['score'];
                        ?>
                    </td>
                    <td>
                        <?php 
                            echo $score['thru'];
                        ?>
                    </td>                                       
                </tr>
                
                <tr id='<?=$pid?>' class='collapse'>
                                        
                    <td colspan=4>
                        <table class='table'>
                            <tr>
                                <th class='sub-th' scope='col'></th>
                                <th class='sub-th' scope='col'>1</th>
                                <th class='sub-th' scope='col'>2</th>
                                <th class='sub-th' scope='col'>3</th>
                                <th class='sub-th' scope='col'>4</th>
                                <th class='sub-th' scope='col'>5</th>
                                <th class='sub-th' scope='col'>6</th>
                                <th class='sub-th' scope='col'>7</th>
                                <th class='sub-th' scope='col'>8</th>
                                <th class='sub-th' scope='col'>9</th>
                                <th class='sub-th' scope='col'>TOTAL</th>
                            </tr>
                        </table>
                    </td>
                </tr>
            </div>
        <?php 
            $x++;
            }
            }
        ?>

在浏览器中输出源代码，主表行HTML为：

<div class="collapse">
    <tr data-bs-toggle='collapse' data-bs-target='#609d0993906429612483cf49'>

可折叠行HTML为：

<tr id='609d0993906429612483cf49' class='collapse'>                                 
    <td colspan=4>
        <table class='table'>
        ...

因此，它具有从DB填充的target和id标记。