I have a bootstrap panel(chat-area), and I'm showing chat messages in there. So, once a user clicks on the Send button, the message should be shown in the chat-area.

This is my html code for the chat-area.

```
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="">Tinychat</a>
      </div>
      <form class="navbar-form navbar-right" action="" method="post">
        <div class="form-group">
          <span>Hi, </span>
          <input class="form-control" type="text" name="username" value="" placeholder="Enter any username">
        </div>
        <button type="submit" name="submit" class="btn btn-primary">Use</button>
      </form>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <div class="panel panel-primary">
          <header class="panel-heading">
            <p class="panel-title">Chat messages</p>
          </header>
          <div class="panel-body fixed-panel" id="chat-area">
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-left">
                  <p class="message-heading">harry</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
            <div class="row">
                <div class="chat-message chat-right pull-right">
                  <p class="message-heading">tom</p>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
                </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="panel panel-success">
          <header class="panel-heading">
            <p class="panel-title">User list</p>
          </header>
          <div class="panel-body fixed-panel">
            <ul class="list-unstyled user-list">
              <li>tom</li>
              <li>harry</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-md-9">
        <form class="" action="" method="post">
          <div class="form-group">
            <textarea class="form-control" id="message" rows="2" style="resize:none"></textarea>
          </div>
          <button type="submit" id="send" class="btn btn-primary pull-right">Send</button>
        </form>
      </div>
      <div class="col-md-3">

      </div>
    </div>
  </div>

  <!-- jquery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="apps.js"></script>
</body>

```

this is my jquery code.

```
var main = function() {
   $("#send").click(function() {
   var message = $("#message").val();
   var addMessage = "<div class='row'><div class='chat-message chat-right pull-right'><p class='message-heading'>tom</p><p>" + message + "</p></div></div>";
   $("#chat-area").append(addMessage);
});

$("#message").keyup(function() {
   var messageLength = $("#message").val().length;

   if(messageLength <= 0)
     $("#send").addClass("disabled");
   else {
     $("#send").removeClass("disabled");
   }

});

$("#send").addClass("disabled");
}

$(document).ready(main);

```

send is the button, and message is the textarea.

The problem is, I'm not able to append this addMessage to the chat-area. Also, when I debug in chrome, I see that the section is appended, but as soon as the function returns back, that section disappears.

Please help.

Thanks!!