using jquery and style dynamically
<p>I have a problem with this code:
if you click the "appened text" twice you will get 2 divs one with content of "hello2"
and one with "hello3", but for some resone when you click on them they open the same block.
insted of having each of them opening his own block.(I want to keep it dynamically created.) thanks for the help</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script&gt;
var k=1;
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
function appendText()
{
  k=k+1;
  var css = '#flip'+k+' { padding:5px; text-align:center; background-color:#ffff00;   border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  var css = '#panel'+k+'{padding:50px;display:none;text-align:center; background-   color:#'+k+''+k+''+k+''+k+''+k+''+k+'; border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);

  var flip2 = document.createElement("div");
  flip2.innerHTML = "Hello"+k;
  flip2.id = ("flip"+k);

  var panel2= document.createElement("div");
  panel2.innerHTML = "Hello"+k;
  panel2.id = ("panel"+k);

  document.body.appendChild(flip2);
  document.body.appendChild(panel2);

  $(document).ready(function(){
    $(("#flip"+k)).click(function(){
      $(("#panel"+k)).slideToggle("slow");
    });
  });
}
&lt;/script&gt;

&lt;style type="text/css"&gt; 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;This is a paragraph.&lt;/p&gt;
&lt;button onclick="appendText()"&gt;Append text&lt;/button&gt;


&lt;div id="flip"&gt;Click to slide the panel down or up&lt;/div&gt;
&lt;div id="panel"&gt;Hello world!&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
