Html a<；上的jQuery切换；部门>；不起作用

我试图将mysql中的信息放入2个

div

s中，1个用于标题，1个用于当您单击标题

div

时可以看到的信息。您在循环中使用相同的id，这是错误的，所有事件仅适用于第一个id，而其他事件则被忽略

<?php
    foreach($result as $tile)
    {?>
        <div id="music">
            <?php echo $tile['Onderwerp']?>
        </div>
        <div id="musicinfo">
            <?php echo $tile['Omschrijving']?>
        </div>
<?php }?>

<?php
    foreach($result as $tile)
    {?>
        <div id="music">
            <?php echo $tile['Onderwerp']?>
        </div>
        <div id="musicinfo">
            <?php echo $tile['Omschrijving']?>
        </div>
<?php }?>

foreach ($result as $title) { ?>
    <div class='wrapper'>
       <div class='music'></div>
       <div class='musicInfo'></div>
    </div>
<?php } ?>

$('.music').click(function() {
     $(this).parent().find('.musicInfo').toggle();
});