When placing each search result in its own collapse panel, only first panel works (PHP foreach loop)

Question

Hi there,
<?php foreach ($results as $result): ?>
  <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab">
<?php echo htmlspecialchars($result['name'], ENT_QUOTES, 'UTF-8'); ?>   
    </div>
    <div class="CollapsiblePanelContent">
  <?php echo htmlspecialchars($result['description'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
  </div>
  <?php endforeach; ?>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
  </script>
Above is the segment where I want to generate a list of results using PHP/SQL. I know for sure that there isn't anything wrong with the PHP, there's something about the collapsible panels that I can't get my head around...
WHAT I WANT IT TO DO:
Display the result of my query, each in a collapsible panel with the Name in the panel's tab and the additional Description on the panel's content area. Do this for all results.
WHAT IT DOES:
The above, except that only the first collapsible panel works (collapses fine). The results following are still in collapsible panels with the exception that they don't collapse at all.
So can anyone come up with a good solution to fix this? Something quick will do (that I don't have to make drastic changes to my code), I suspect that it has something to do with this line:
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
That it recognizes the first panel as CollapsiblePanel1, the other panels are just unknown... I don't know, that's all I can come up with. Thanks for your time.

Answer 1

Thanks for the tip Gramps, got to the solution!
<?php foreach ($results as $result): ?>
  <div id="CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?>"  " class="CollapsiblePanel">
    <div class="CollapsiblePanelTab">
<?php echo htmlspecialchars($result['name'], ENT_QUOTES, 'UTF-8'); ?>  
    </div>
    <div class="CollapsiblePanelContent">
  <?php echo htmlspecialchars($result['description'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
  </div>
<script type="text/javascript">
var CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?>");
  </script>
  <?php endforeach; ?>
By allowing the script to loop and matching the id. Nice suggestion for the accordion but unfortunately the code above was just an example... the actual results will include tables, <hr> and whatnot.
Being new to the Dreamweaver scene (actually to be honest, I've only started learning about web development a week ago) why are the Spry js (or just Spry in particular) files so large? Are there plugins/methods I can get to delete some features I don't need? I have absolutely no experience with JS... yet.