채팅방 응용 질문

채팅방 구현하는거 까지 해서 했는데 

 <div class="container p-4 detail">

            <div class="row">
              <div class="col-3">
                <ul class="list-group chat-list">

                    <% for (var i=0; i < data.length ; i++){ %>
                      <li class="list-group-item" data-id="<%= data[i]._id %>">
                        <h6> <%= data[i].title %> <%= data[i]._id %></h6>    
                        <h6 class="text-small"> <%= data[i].member[0] %> </h6>
                      </li>
                    <% } %>
                  </ul>
               </div>
         
               <div class="col-9 p-0">
                 <div class="chat-room">
                    <ul class="list-group chat-content">
                      <li><span class="chat-box">채팅</span></li>
                      <li><span class="chat-box">채팅</span></li>
                      <li><span class="chat-box mine">채팅</span></li>
                    </ul>
                  <div class="input-group">
                    <input class="form-control" id="chat-input">
                    <button class="btn btn-secondary" id="send">전송</button>
                  </div>
                </div>
              </div>
            </div>
         
          </div>
       
    </header>
    <main>
        <div class="container">
        </div>
    </main>

    <script>
        $(window).on("load", function(){
            $("header,main").addClass("active");
        });
    </script>

<script>
  $('#send').click(function(){
    var 채팅내용 = $('#chat-input').val();   //1, 2
    var 보낼거 = {
      parent: 지금누른채팅방id,
      content: 채팅내용,
    };
   
    //3
    $.post('/message', 보낼거).then((a) => {  
       console.log(a)
    });
 
  });

  var 지금누른채팅방id;
  var eventSource;

$('.list-group-item').click(function (){
   $(this).css('background-color', '#eee');
   지금누른채팅방id = $(this).attr('data-id');
   $('.chat-content').html('');

 
   eventSource = new EventSource('/message/' + 지금누른채팅방id);
  eventSource.addEventListener('test', function (e){
    console.log(e.data);

    var 가져온거 = JSON.parse(e.data);
    가져온거.forEach((a) => {
        $('.chat-content').append(<li><span class="chat-box">${a.content}</span></li>)
    })
  });
});

</script>

server.js

app.get('/chat',로그인했니, function(요청, 응답){

  db.collection('chatroom').find({ member : 요청.user._id }).toArray().then((결과)=>{
    console.log(결과);
    응답.render('chat.ejs', {data : 결과})
  })

});

app.post('/chatroom', function(요청, 응답){

  var 저장할거 = {
    title : '1대1 채팅방',
    member : [ObjectId(요청.body.당한사람id),요청.user._id],
    date : new Date()
  }

  db.collection('chatroom').insertOne(저장할거).then(function(결과){
    응답.send('저장완료')
  });
});
app.post('/message', 로그인했니, function(요청, 응답){
  var 저장할거 = {
    parent : 요청.body.parent,
    userid : 요청.user._id,
    content : 요청.body.content,
    date : new Date(),
  }
  db.collection('message').insertOne(저장할거)
  .then((결과)=>{
    응답.send(결과);
  })
});

app.get('/message/:parentid', 로그인했니, function(요청, 응답){

  응답.writeHead(200, {
    "Connection": "keep-alive",
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
  });

  db.collection('message').find({ parent: 요청.params.parentid }).toArray()
  .then((결과)=>{
    console.log(결과);
    응답.write('event: test\n');
    응답.write(data: ${JSON.stringify(결과)}\n\n);
  });

  const 찾을문서 = [
    { $match: { 'fullDocument.parent': 요청.params.parentid } }
  ];

  const changeStream = db.collection('message').watch(찾을문서);
  changeStream.on('change', result => {
    console.log(result.fullDocument);
    var 추가된문서 = [result.fullDocument];
    응답.write(data: ${JSON.stringify(추가된문서)}\n\n);
  });
 

});

채팅 보내면 왼쪽으로 다 쏠리는데

내가 보낸 채팅은 오른쪽으로 보낼려고 하면 어떻게 해야 하나요