I need ($("#flip").click slideToggle ) to perform several times on the same page with same <div> ID
<p>I have a FAQs page that reads from XML using XSl code, The div for the question and answer will be repeated as much as the number of records in the XML.</p>

<p>This is the XSL code:</p>

<pre><code>&lt;xsl:for-each select ="TSPRoot/FAQS/FAQ"&gt;
&lt;div id="flip"&gt;
&lt;xsl:value-of select ="Question"/&gt;
&lt;/div&gt;
&lt;div id="panel"&gt;
&lt;xsl:value-of  select ="Answer" disable-output-escaping ="yes"/&gt;
&lt;/div&gt;
&lt;/xsl:for-each &gt;
</code></pre>

<p>And in the head I have this JQuery code:</p>

<pre><code>&lt;script&gt;
$(document).ready(function(){
    $("#flip").click(function(event){
        event.preventDefault();
        $("#panel").slideToggle("slow");
    });
});
&lt;/script&gt;
</code></pre>

<p>The slideToggle works only for the first div, then it do not work.</p>

<p>I can't figure out any ideas.</p>
