JQuery .append () для нескольких мест в одном forloop Python Django

Question

У меня есть приложение чата, и сообщения классифицируются как outgoing или incoming.

На стороне клиента эти сообщения отображаются с обеих сторон чата, в зависимости от того, отправлены они или получены.

Я пытаюсь использовать Jquery .append(msgText) для отображения сообщения при его отправке или получении (как показано на рисунке выше), но не могу получить его в нужном месте с правильным форматированием (оно появляется только после страницыобновить, но я хочу, чтобы он отображался в режиме реального времени).

Я пытался настроить таргетинг на var sentMsg = $('#sent_msg') с #sent_msg в качестве идентификатора в forloop, но он, очевидно, просто добавляет отправленный текст к каждому отправляемому сообщению.

Если я поставлю его вне forloop (ex) var chatHolder = $('#chat-items'), то проблема в том, что нет форматирования слева и справа ... все сообщения (отправленные и полученные) просто приходятс левой стороны в неупорядоченном списке.

Есть ли способ добавить к каждой новой итерации forloop и также применить правильное форматирование / стили?

Я изучаю веревкивот так бы оценил любойinput.

thread.html

 <ul id="chat-items">
            {% for chat in object.chatmessage_set.all %}
            {% if chat.user == user %}
<div id="sent_msg">
            <div class="outgoing_msg">
              <div class="outgoing_msg_img"> <img src="{{ chat.user.profile.image.url }}" alt="sunil"> </div>
              <div class="sent_msg">
                <p>{{ chat.message }}</p>
                <span class="time_date"> {{ chat.timestamp }}</span>
              </div>
            </div>
</div>
            {% else %}
<div id="incoming_msg">
            <div class="incoming_msg">
              <div class="incoming_msg_img"> <img src="{{ chat.user.profile.image.url }}" alt="sunil"> </div>
              <div class="received_msg">
                <div class="received_withd_msg">
                  <p>{{ chat.message }}</p>
                  <span class="time_date"> {{ chat.timestamp }}</span>
                </div>
              </div>
            </div>
</div>
            {% endif %}
            {% endfor %}
            </ul>

base.html

<script>
    // websocket scripts - client side*
    var loc = window.location
    var msgInput = $("#id_message")
    var chatHolder = $('#chat-items')
    var incomingMsg = $('#incoming_msg')
    var sentMsg = $('#sent_msg')

    // below is the message I am receiving
    socket.onmessage = function(e) {
      console.log("message", e)
      var chatDataMsg = JSON.parse(e.data)
      incomingMsg.append('<li>' + chatDataMsg.message + ' from ' + chatDataMsg.username + '</li>')
    }

    // below is the message I am sending
    socket.onopen = function(e) {
      console.log("open", e)
      formData.submit(function(event) {
        event.preventDefault()
        var msgText = msgInput.val()
        sentMsg.append(msgText)
        var finalData = {
          'message': msgText
        }
        socket.send(JSON.stringify(finalData))
        formData[0].reset()
      })
    }