Appended messages collides with previous data

$(document).ready(function() {
  $('#save').click(function() {
    var message = $('#message').val();
    if (message == "") {
      alert('please Enter Message');
    } else {
      var msg = "<div>" +
        "<b>New message</b>" + message + "<br>" +
        "</div>";
      $('#messages').append(msg);
      $('#messages').animate({
        scrollTop: $('#messages').get(0).scrollHeight
      });
    }
  })
});

* {
  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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="previous_message_from_db">
  old message1 from database <br><br> 
  old message2 from database <br><br> 
  old message3 from database <br><br> 
  old message4 from database <br><br> 
  old message4 from database <br><br>
</li>
<li class="" id="messages"></li>
<div class='footer'>
  <input id="message" name="message" class="box chat_textbox" placeholder="Type yor message here.." />
  <input type="submit" id="save" value="Send" class='btn' />
</div>