Collapsible Panel that increases it's id every time in my loop
<p>I have Collapsible Panel and this is the header of it,</p>

<pre><code>&lt;div id="CollapsiblePanel1" class="CollapsiblePanel"&gt;
     &lt;div class="CollapsiblePanelTab" tabindex="0"&gt;Comments&lt;/div&gt;
     &lt;div class="CollapsiblePanelContent"&gt;
       Content 
     &lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>now I get the content from my DB and every time I get more content I go in new CollapsiblePanel all I need to know how to increases the <code>id="CollapsiblePanel1"</code> to be <code>id="CollapsiblePanel2"</code> and <code>id="CollapsiblePanel3"</code> and ect.</p>

<p>OK I have updated to all code of the page hope you get my point here </p>

<pre><code>&lt;script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" /&gt;

&lt;script type="text/javascript"&gt;
var index = 1;  
function update() {
    document.getElementById('CollapsiblePanel'+index).id = 'CollapsiblePanel'+(index+1);
    index++;
}​
&lt;/script&gt;

&lt;?php

    $getBlogers ="select * from blogs where active=1";
    $result = $db -&gt; query ($getBlogers) or die ($db-&gt;error);

?&gt;
&lt;style type="text/css"&gt;
.UsersBlog #blogerComments tr .blogCommentsText {
    border: 1px solid #CCC;
}
&lt;/style&gt;


&lt;div id='contentBody_tutorials'&gt;
&lt;table width="560" border="0"&gt;
  &lt;tr&gt;
    &lt;td width="68"&gt;&lt;img src="images/shareIcon.jpg" width="64" height="77" alt="share" /&gt;&lt;/td&gt;
    &lt;td width="482" class="TextShareYourTutorials"&gt;Share your knowledge &lt;span class="whatIsAllAbout"&gt;what is this about?&lt;/span&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;div id="contentOnContentBody_blog"&gt;
  &lt;table id="blogerHeader" width="575" border="0" cellpadding="5"&gt;
    &lt;tr&gt;
      &lt;td width="121" rowspan="4" align="center" valign="middle"&gt;&lt;img src="images/userInvisible.jpg" width="80" height="80" /&gt;&lt;/td&gt;
      &lt;td colspan="2"&gt;Welcome&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;Your have 5   blogs&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td colspan="2"&gt;Last blog date&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td width="135"&gt;&lt;a href="#"&gt;Add new blog&lt;/a&gt;&lt;/td&gt;
      &lt;td width="198"&gt;&lt;a href="#"&gt;View my blogs&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  &lt;hr align="left" noshade="noshade" style="border:dotted 1px #b2b2b2;" /&gt;
&lt;?php
    while ($blogsRow = $result -&gt; fetch_object())
    {
?&gt;
&lt;div class="UsersBlog"&gt;
&lt;img style="margin-right:5px;" src="images/userInvisible.jpg" width="49" height="49" align="left" /&gt;&lt;span class="blogTitle"&gt;&lt;?php echo $blogsRow-&gt;Btitle; ?&gt;&lt;/span&gt;&lt;br /&gt;&lt;span class="ByNameCommenter"&gt;&lt;?php echo $blogsRow-&gt;ByName; ?&gt;&lt;br /&gt;&lt;?php echo $blogsRow-&gt;dateAdded ?&gt;&lt;/span&gt;
   &lt;br /&gt;
   &lt;img style="margin:5px 0 5px 0;" src="images/roler_of_blogs.jpg" width="407" height="1" alt="ruler" /&gt;
   &lt;br /&gt;
   &lt;p&gt;&lt;?php echo $blogsRow-&gt;Bdescription; ?&gt;&lt;/p&gt;
   &lt;br /&gt;
   &lt;p&gt;&lt;a href="includes/postComments.php?id=&lt;?php $gotIT=$blogsRow-&gt;id; echo $gotIT; ?&gt;"&gt;&lt;span class="commentLink"&gt;Comment&lt;/span&gt;&lt;/a&gt; - &lt;span class="reportLink"&gt;Report&lt;/span&gt;&lt;/p&gt;

   &lt;div id="CollapsiblePanel" class="CollapsiblePanel"&gt;
     &lt;div class="CollapsiblePanelTab" tabindex="0"&gt;Comments&lt;/div&gt;
     &lt;div class="CollapsiblePanelContent"&gt;
   &lt;table width="400" border="0" cellpadding="5" cellspacing="0" id="blogerComments"&gt;
   &lt;?php
   $getComments="select * from blogscomments where blogestID=$gotIT";
   $getCommentsRuselts = $db -&gt; query ($getComments) or die ($db-&gt;error);
   while($rows = $getCommentsRuselts -&gt;fetch_object()) {
?&gt;
&lt;tr&gt;
     &lt;td align="left" class="grayBoldText"&gt;by: &lt;/td&gt;
     &lt;td align="left" class="normailDarkBlueText"&gt;&lt;?php echo $rows-&gt;name; ?&gt;&lt;/td&gt;
     &lt;td align="left" width="38" class="grayBoldText"&gt;Date: &lt;/td&gt;
     &lt;td align="left" class="normailDarkBlueText"&gt;&lt;?php echo $rows-&gt;dateCommented; ?&gt;&lt;/td&gt;
   &lt;/tr&gt;

   &lt;tr&gt;
   &lt;td colspan="4" bgcolor="#F3F3F3" class="blogCommentsText"&gt; &lt;?php echo $rows-&gt;comments; }?&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;/table&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
&lt;?php
    }
?&gt;

&lt;/div&gt;

&lt;script type="text/javascript"&gt;
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
&lt;/script&gt;
</code></pre>
