title: change a inner html id with js
body: <p>how do you change a inner id with js and keep it the same id num (e.g hey1, bob2)</p>
  
  <p>my js code</p>
  
  <pre><code>var obj = document.getElementById("chat").cloneNode(true);
  var obj1 = document.getElementById("ch");
  var obj2 = document.getElementById("chatbox");
  
  var p = $(".chat");
  var offset = p.offset();
  
  num = num + 1;        
  
  if (num &lt;=15) {
  
  obj.id = obj.id + num;  &lt;--- **changing the id (this one works fine but the other two dont**
  obj1.id = obj1.id + num;   &lt;--- changing the id
  obj2.id = obj2.id + num;      &lt;--- changing the id
  
  document.body.appendChild(obj);
  document.body.appendChild(obj1);
  document.body.appendChild(obj2);
  
  var left = offset.left + 275;
  
  document.getElementById("chat").style.left = left + "px";
  </code></pre>
  
  <p>tell me if i am doing it wrong but this was the easiest way i thought off </p>
  
  <p>(ps i am a beginner at javascript)</p>
  
  <p>thanks to all that try to help...</p>
  
  <p><strong>Edit</strong></p>
  
  <p>ok i clone this </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><strong>clone1</strong></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><strong>Clone2</strong></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>