Rails Channels realtime chat

Question

I have create a realitime chat but i can't figure how to display right on the view page, i want the person who send the message to display on the right and the others can see the message on the left

so i have this on the views

        <%= form_for(:message, :url => {:controller => 'messagers', :action => 'reply'}, remote: true) do |f| %>

                <% if @room.present? %>
                <%= f.number_field :room_number, name: "room_number", style: "display:none;", value: @room.id %>

                <header>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
                <div>
                  <h2><%=  @room.title %></h2>
                  <h3>already <%= @room.messager.content.length %> messages</h3>
                </div>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
                </header>
                <% i = 0 %>
                <ul id="chat">
                    <% while i < @room.messager.content.length  %>
                    <li class="<%= @room.messager.username[i] == @user ? "me" : "you" %>">
                                    <div class="entete">
                                        <h3><%= @room.messager.send_time[i].strftime("%H:%M %p") %></h3>
                                        <h2><%= @room.messager.username[i] %></h2>
                                        <span class="status blue"></span>
                                    </div>
                                    <div class="triangle"></div>
                                    <div class="message">
                                        <%= @room.messager.content[i] %>
                                    </div>
                                </li>
                                <% i +=1 %>
                                <% end %>
                                </ul>


        <footer>
                        <%= f.text_area :message, id: "comment_field", value: "", name: "message" %>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
            <%= f.submit 'Send', class: "sendButton" %>
        <% end %>
        </footer>

and this on the controller

  def reply
    Messager.post_message(User.find_by_id(session[:user_id]), params[:message], Room.find(params[:room_number]))
  end

then im going to model

    def self.post_message(user,content,room,all_users)
        room.messager.content << content
        room.messager.username << user.username
        room.messager.send_time << Time.now
        if room.messager.save
            ActionCable.server.broadcast 'message_channel', content: [user.username, content, Time.now.strftime("%H:%M %p"),all_users]
        end
    end

and last to the channel

import consumer from "./consumer"

consumer.subscriptions.create("MessageChannel", {
  connected() {
    console.log("hey there")
    // Called when the subscription is ready for use on the server
  },

  disconnected() {
    // Called when the subscription has been terminated by the server
  },

  received(data) {
    $('#chat').append('<li class="me"> <div class="entete"' + ' <h3>' + data.content[2] +  '</h3> <h2>' + data.content[0] + '</h2>' + '<span class="status blue></span>' + '</div> <div class="triangle"></div>' + '<div class="message">' + data.content[1] + '</div>' )
    // Called when there's incoming data on the websocket for this channel
    $('#comment_field').val('')
    window.setInterval(function() {
      var elem = document.getElementById('chat');
      elem.scrollTop = elem.scrollHeight;
    }, 5000);
    var elem = document.getElementById('chat');

    elem = document.documentElement.scrollTop = 0;


    // Called when there's incoming data on the websocket for this channel
  },

  speak: function() {

    return this.perform('speak');
  }
});

so far the problem is that how can i change the $('#chat').append('<li **class="me"**> to be $('#chat').append('<li class="you"> if the user who send the message isn't the same with the session