Emulate chat help dialog?

Question

I am trying to emulate a help chat dialog. It is hardcoded for now, so there are predictable robot responses from the "help" side. Upon opening the dialog, the first message will fade in. Yo can type anything into the input box and click send to keep the chat going. Shortly after, the 2nd help response will fade in. I need 2 things. One is that when you type new messages, the go into a new set of divs, and not continue in the first. So if you press send again, it will append after the latest response. Two is that I can keep this going without giving a new class to each response (hopefully) .advChat1, 2, 3, 4 and so on can be tedious.

http://jsfiddle.net/qp7NP/209/

jQuery

          $( ".helpOpen" ).click(function() {
              $( ".helpDialog" ).dialog( "open" );
              $( ".advChat1" ).show(1200);
          }); 

          $( ".saveText" ).click(function() {
              $('.text1').append($('.resChat').val());
              $( ".userChat" ).show(800);
              $( ".advChat2" ).delay( 2200 ).show(1200);
          });

Answer 1

You will have some troubles to append user talk then advisor talk etc. if the chat markup is already defined in the DOM.

You should defined a #chat div for example, where you append each reply dynamically. Hope this jsFiddle can help you.