title: Appended messages collides with previous data
body: <p>The code below appends new chat messages normally and works well. I have added a previous message div as per:</p>
  <pre><code>&lt;li id=&quot;previous_message_from_db&quot;&gt;
    old message1 from database &lt;br&gt;&lt;br&gt;
    old message2 from database &lt;br&gt;&lt;br&gt;
    old message3 from database &lt;br&gt;&lt;br&gt;
    old message4 from database &lt;br&gt;&lt;br&gt;
    old message4 from database &lt;br&gt;&lt;br&gt;
  &lt;/li&gt;
  </code></pre>
  <p>The issue is that when I chat from the textbox instead of the newly arrived message moving up the old messages just like in a chat system, it will collide or jam with it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('#save').click(function() {
      var message = $('#message').val();
      if (message == "") {
        alert('please Enter Message');
      } else {
        var msg = "&lt;div&gt;" +
          "&lt;b&gt;New message&lt;/b&gt;" + message + "&lt;br&gt;" +
          "&lt;/div&gt;";
        $('#messages').append(msg);
        $('#messages').animate({
          scrollTop: $('#messages').get(0).scrollHeight
        });
      }
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font: 13px Helvetica, Arial;
  }
  
  .footer {
    background: #000;
    padding: 3px;
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  
  .box {
    border: 0;
    padding: 10px;
    width: 90%;
    margin-right: .5%;
  }
  
  .btn {
    color: white;
    background: blue;
    border: none;
    padding: 10px;
    width: 9%;
  }
  
  #messages {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 70px;
    padding-top: 70px;
    float: left;
    width: 79%;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  #previous_message_from_db {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 70px;
    padding-top: 70px;
    float: left;
    width: 79%;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li id="previous_message_from_db"&gt;
    old message1 from database &lt;br&gt;&lt;br&gt; 
    old message2 from database &lt;br&gt;&lt;br&gt; 
    old message3 from database &lt;br&gt;&lt;br&gt; 
    old message4 from database &lt;br&gt;&lt;br&gt; 
    old message4 from database &lt;br&gt;&lt;br&gt;
  &lt;/li&gt;
  &lt;li class="" id="messages"&gt;&lt;/li&gt;
  &lt;div class='footer'&gt;
    &lt;input id="message" name="message" class="box chat_textbox" placeholder="Type yor message here.." /&gt;
    &lt;input type="submit" id="save" value="Send" class='btn' /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>