expand/collpase not all working within created div
<p>I have this code to create div and collapse/expand element within each created div.</p>

<pre><code>     var i=1;
      $('#addDiv').click(function() {
        var divId="addedDiv"+i; 
        $(".content_body").slideUp(500);      
        $('&lt;div&gt;&lt;/div&gt;').attr({
            'id' : divId,
            'class' : 'addedDiv'           
      })
      .appendTo('#container').load("content.php");
      $(".content_head").click(function()
      { 
        $(this).next(".content_body").slideToggle(600);
      });
      i++;
    });
</code></pre>

<p>content.php :</p>

<pre><code>&lt;h2 class="content_head" style="background:orange;"&gt; header&lt;/h2&gt;      
&lt;div class="content_body" style="background:blue;"&gt; content &lt;/div&gt;
</code></pre>

<p>html :</p>

<pre><code> &lt;input id="addDiv" type="button" value="add div" &gt;
 &lt;div id="container" style="width:500px;height:auto;background:red;"&gt;&lt;/div&gt;
</code></pre>

<p>Say 5 div created, the expand/collapse on 1st,2nd and 3rd created div not working well.</p>

<p>How to fix this problem and also how to insert the 'id' of created div into header of each
(e.g. header of 2nd div = header addedDiv2) ?</p>

<p>Thanks in advance for any suggestions.</p>
