title: create a new instance of group of elements
body: <p>I am beginner in jQuery and asp.net. I created a simple chat application using SignalR, the design of which you can find here   <strong><a href="http://jsbin.com/utoyej/1/edit" rel="nofollow noreferrer">fiddle</a></strong></p>
  
  <p>How can I create a new instance of that <em>chat design</em> whenever a user has been call by other user while he/she were in chat from before with other user. Here I think I can convert it to User Control. but I dont want to have same <code>Id</code>'s which I am using for other chat design and those generated instances should work differently, I mean if <code>userA</code> calls <code>userB</code> and at the same time <code>userC</code> calls <code>userB</code> then they must be created in such a way that they must be unique in handling there own calls (just like FB Chat).</p>
  
  <p>The another issue may arise after successfully creating a new instance is that they might not be get attached to the jQuery functions and server side code automatically. If so, anyway to solve this too?</p>
  
  <p>Before asking here I searched alot (maybe I dont know the exact keyword to search for).</p>
  
  <p><strong>EDIT</strong>: Many jQuery developers suggested me to go with <em>Knockout.js</em> or <em>Backbone.js</em> or simple jQuery. But I think there is some simple way to achieve this using ASP.NET functions like <em>User Control</em> or <em>HTTP Handlers</em> (or something else). About which I dont know anything. So, please suggest me which concept to opt for ? and please give detailed explanation(if possible with simple example). </p>
  
  <p>jquery related answers are also welcome.</p>
  
  <p><strong>Single Instance</strong></p>
  
  <p><img src="https://i.stack.imgur.com/CVPya.png" alt="enter image description here"></p>
  
  <p><strong>Multiple Instances</strong></p>
  
  <p><img src="https://i.stack.imgur.com/Q1svE.png" alt="enter image description here"></p>