JavaScript Firebase チャットをうまくできない

前提・実現したいこと

自分は今Firebaseを使ってサイトのユーザーが不明点などがある場合管理者にメッセージが遅れるチャット画面を作成しています。
チャットを<ul>で作成はできるのですがチャットのメッセージを一つずつ分けるにはどうしたらよろしいでしょうか？
写真を載せますお願いします。

該当のソースコード

JavaScript
1
2
3<!DOCTYPE html>
4<html>
5	<head>
6		<title>Chat</title>
7		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
8		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
9		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
11		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.js"></script>
12    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
13    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
14    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
15    <link rel="stylesheet" href="style.css">
16    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
17    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
18    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
19
20  </head>
21	<body>
22  <script src="https://www.gstatic.com/firebasejs/6.4.1/firebase-app.js"></script>
23  <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
24
25  <script>
26    // Your web app's Firebase configuration
27    var firebaseConfig = {
28      apiKey: "AIzaSyCSxI9KKpWQPZX4z4pQk2HWBW-yBIpGe2Y",
29      authDomain: "practice-d0d64.firebaseapp.com",
30      databaseURL: "https://practice-d0d64.firebaseio.com",
31      projectId: "practice-d0d64",
32      storageBucket: "",
33      messagingSenderId: "85550536751",
34      appId: "1:85550536751:web:9937706fc6eda762"
35    };
36    // Initialize Firebase
37    firebase.initializeApp(firebaseConfig);
38  </script>
39
40  <script type="text/javascript">
41
42  var db = firebase.firestore();
43  </script>
44
45	<div class="container-fluid h-100">
46		<div class="row justify-content-center h-100">
47			<div class="col-md-8 col-xl-6 chat">
48				<div class="card">
49					<div class="card-body msg_card_body">
50						<div class="d-flex justify-content-start mb-4">
51							<div class="msg_cotainer" id = "bubble">
52							is
53							</div>
54						</div>
55						<div class="d-flex justify-content-end mb-4">
56							<div class="msg_cotainer_send">
57							<ul id="chatlog"></ul>
58							</div>
59
60						</div>
61					</div>
62					<div class="card-footer">
63						<div class="input-group">
64							<div class="input-group-append">
65								<span class="input-group-text attach_btn"></span>
66							</div>
67							<textarea name="" class="form-control type_msg" placeholder="Type your message..." id="message"></textarea>
68							<div class="input-group-append"　onClick="document.location.reload(true)">
69								<span class="input-group-text send_btn"　id="submitButton" onClick="submitMessage()"><i class="fas fa-location-arrow"></i></span>
70							</div>
71						</div>
72					</div>
73				</div>
74			</div>
75		</div>
76	</div>
77            <script type="text/javascript"`>
78
79              </script>
80              <h1>ヘルプサポート</h1>
81              // <ul id="chatlog"></ul>
82              // <input type="text" id="message">
83              // <div onClick="document.location.reload(true)"><input type="button" id="submitButton" value="送信" onClick="submitMessage()"></div>
84
85          <script>
86              var messagesRef = db.collection("chatrooms").doc("room1").collection("messages");
87
88              messagesRef.orderBy("date", "desc").limit(20).onSnapshot((snapshot) => {
89                  snapshot.docChanges().forEach((change) => {
90                      if (change.type === 'added') {
91                          addLog(change.doc.data());
92                      }
93                  });
94              });
95              function submitMessage() {
96                  var msg = document.getElementById("message").value;
97
98                  var docData = {
99                      msg: msg,
100                      date: new Date().getTime()
101                  };
102                  messagesRef.add(docData).then(() => {
103                      console.log("Document successfully written!");
104                  });             }
105              function addLog(data) {
106                  var li = document.createElement('ul');
107                  li.appendChild(document.createTextNode(data.msg));
108                  document.getElementById("chatlog").insertBefore(li, chatlog.firstChild);
109              }
110          </script>
111	</body>
112</html>