hep with jquery bottom chat bar
<p>hey guys last final piece to my jquery/javascript chat box stopped working if i clone my chat
with javascript.</p>

<p>This is my javascript code to clone and change the id of a few divs.</p>

<p>e.g it changes the ch, chat and chatbox ids/classes.</p>

<p>by one for instance</p>

<pre><code>&lt;div class="chat" id="chat"&gt;
&lt;div id="ch" class="ch"&gt;
               &lt;h2&gt;Chat&lt;/h2&gt;&lt;/div&gt;
               &lt;div class="chatbox" id="chatbox"&gt;
               &lt;div class="messages"&gt;&lt;/div&gt;
               &lt;textarea id="message" class="chatinp" 
               rows="3" cols="27"&gt;&lt;/textarea&gt;
               &lt;button class="send"&gt;Send&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and everytime it clones it changes the id of chat,ch and chatbox but keeping the original the same</p>

<p>like so...</p>

<p>clone1</p>

<pre><code>    &lt;div class="chat" id="chat1"&gt;
    &lt;div id="ch1" class="ch"&gt;
                   &lt;h2&gt;Chat&lt;/h2&gt;&lt;/div&gt;
                   &lt;div class="chatbox" id="chatbox1"&gt;
                   &lt;div class="messages"&gt;&lt;/div&gt;
                   &lt;textarea id="message" class="chatinp" 
                   rows="3" cols="27"&gt;&lt;/textarea&gt;
                   &lt;button class="send"&gt;Send&lt;/button&gt;&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p><br />
<br /></p>

<p>Clone2</p>

<pre><code>&lt;div class="chat" id="chat2"&gt;
&lt;div id="ch2" class="ch"&gt;
               &lt;h2&gt;Chat&lt;/h2&gt;&lt;/div&gt;
               &lt;div class="chatbox" id="chatbox2"&gt;
               &lt;div class="messages"&gt;&lt;/div&gt;
               &lt;textarea id="message" class="chatinp" 
               rows="3" cols="27"&gt;&lt;/textarea&gt;
               &lt;button class="send"&gt;Send&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><br />
<br /></p>

<pre><code>var num = new Number();
num = 0



function chat(){
if(!document.getElementById("chat")){
var chatdiv = document.createElement('div');
  chatdiv.id = 'chat';
  chatdiv.className = 'chat';
  chatdiv.innerHTML = 
              ['&lt;div id="ch" class="ch"&gt;',
               '&lt;h2&gt;Chat&lt;/h2&gt;&lt;/div&gt;',
               '&lt;div class="chatbox" id="chatbox"&gt;',
               '&lt;div class="messages"&gt;&lt;/div&gt;',
               '&lt;textarea id="message" class="chatinp" ',
               'rows="3" cols="27"&gt;&lt;/textarea&gt;',
               '&lt;button class="send"&gt;Send&lt;/button&gt;&lt;/div&gt;'
              ].join(' ')
  document.body.appendChild(chatdiv); 

} 
else 
{
var obj  = document.getElementById("chat").cloneNode(true),
      children = obj.childNodes;
  num += 1;
//change the id of the cloned element
  obj.id = obj.id+num;

  //traverse the child nodes of obj to
  //change id (call function changeId)
  if (num&lt;16){
      changeId(children,num);
  }

  //now appending obj to the document.body should be sufficient
var p = $(".chat");
var offset = p.offset();
var left = offset.left + 261;
//now appending obj to the document.body should be sufficient
document.body.appendChild(obj);
document.getElementById("chat").style.left = left + "px";

  //demonstrate that the id value has changed
  var nwchatbox = document.getElementById('chatbox'+num)
  nwchatbox.value = 'my id = '+nwchatbox.id;

  //function to add number to id's of a nodelist (recursive)
  //used in the above 
  function changeId(nodes, n){
   for (var i=0;i&lt;nodes.length;i=i+1){
     if (nodes[i].childNodes){
           changeId(nodes[i].childNodes,n);
     }
     //if id value is 'ch' or 'chatbox', change it
     if(nodes[i].id &amp;&amp; /^ch$|^chatbox$/i.test(nodes[i].id)) {
      nodes[i].id += String(n);
     }
   }
  }
}
}
</code></pre>

<p>ok my question is how do i slideToggle a chat box individuality 
and every time i clone a chat box it changes the adds a instance to the jquery so it will open up the clone?</p>

<p>ok you open the chat box by pressing on the "ch" id/class and it pushes the chatbox class/id up.  but remember everytime i clone it, it changes the id of the "ch" div</p>

<p>thanks for your help</p>
