How to have custom layout for user B when a new comment is added by a user A using faye in Rails?

I have built a discussion rails app using faye. It works but there is one issue.

Expected Result: If user A comments, then in his screen his image should be on right hand side. And when user B see's the message in real time in his chat window, User A's image should appear on left hand side.

Obtained Result:

The user A's message appears in User B's chat window, but the user A's image is positioned in right hand side.

Faye is pushing the same message to every user without considering the if conditions written by me.

Here is my code:

create.js.erb:

<% publish_to "/chats/index" do %>
    $('.discBox .userPost').removeClass('new');
    $('.discBox').append("<%=escape_javascript(render :partial => '/chats/user_message', :locals=>{:chat => @chat}, :object=> current_user) %>").find('.userPost:last').addClass('new');
<% end %>

The if else condition in user_message partial to have different positioning of user's images:

<% if current_user.id == chat.user.id %>
  <div class="userPost col-lg-12 col-md-12">
    <div class="col-lg-10 col-md-6 paddingReset">
      <div class="userBubble clearfix"> 
        <i class="fa fa-caret-left fa-4x white"></i>
        <div class="col-lg-12 col-md-12 paddingReset">
            <img class="media-object media-object-right img-circle" src="http://api.randomuser.me/portraits/med/women/64.jpg" alt="user pic">
            <div>
              <a href="#"> <h4 style="margin-bottom:5px; display:inline-block;"> <span> <strong> <%= chat.user.email %> </strong> </span> </h4></a>
              <a style="text-decoration:none;" href="#"> <span class="text-muted small"> • <%= time_ago_in_words(chat.created_at).capitalize %> Ago </span> </a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 paddingReset margin-top-xs message"> 
          <%= chat.message %>
        </div>
      </div>
    </div>
  </div>

<% elsif current_user.id != chat.user.id %>
  <div class="userPost col-lg-12 col-md-12">
    <div class="col-md-offset-2 col-lg-offset-2 col-lg-10 col-md-6 paddingReset">
      <div class="userBubble clearfix"> 
        <i class="fa fa-caret-left fa-4x white"></i>
        <div class="col-lg-12 col-md-12 paddingReset">
            <img class="media-object media-object-left img-circle" src="<%= asset_path('7.jpg') %>" alt="user pic">
            <div>
              <a href="#"> <h4 style="margin-bottom:5px; display:inline-block;"> <span> <strong> <%= chat.user.email %> </strong> </span> </h4></a>
              <a style="text-decoration:none;" href="#"> <span class="text-muted small"> • <%= time_ago_in_words(chat.created_at).capitalize %> Ago </span> </a>
            </div>
        </div>
        <div class="col-lg-12 col-md-12 paddingReset margin-top-xs message"> 
          <%= chat.message %>
        </div>
      </div>
    </div>
  </div>
<% end %>

index.html.erb:

<div class="col-lg-3 col-md-10 col-sm-12 margin-top-md">
    <div class="h3 margin-top-xs raleway uppercase contentTitle active"> Back </div>
</div>

<div class="col-lg-8 col-md-11 col-sm-12 margin-top-md">
    <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12 paddingReset commentContainer"> 
      <div class="commentWrapper disc-about">
        <div class="media roboto">
          <div class="media-body">
          </div>
        </div>
      </div>
      <div class="discBox col-lg-12 col-md-12 paddingReset">
        <% if @chat %>
            <% @chat.each do |chat| %>
                <%= render partial: 'user_message', locals: {:chat => chat } %>
            <% end %>
        <% end %>   
      </div>


      <div class="messageBox col-lg-12 col-md-12 paddingReset">
        <%= form_tag "/chats",:method=> 'post', remote: true do %>
            <%= hidden_field_tag 'login',current_user.email %>
            <div class="form-group">
                <label for="message_box"> Comment:</label>
                <textarea class="form-control" value="" id="message_box" name="chat[message]" ></textarea>
            </div>
            <button class="btn btn-sm btn-info">Submit</button>
        <% end %>
      </div>

    </div>
</div>
<%#= javascript_include_tag 'private_pub.js' %>
<%#= javascript_include_tag 'chats.js' %>
<%= subscribe_to "/chats/index" %>
<style type="text/css">
.discBox {
    border: 1px solid #666;
    height: 500px;
    margin-bottom: 15px;
    overflow: auto;
    background-color: #CE3;
}
.message{
    margin-bottom: 10px;
}
.new > div{
    border-top: 1px solid dodgerblue;
    margin-top: 14px;
}
.paddingReset{
  padding-right: 0;
  padding-left: 0;
}
</style>

I have hosted this app on heroku, and the complete source code is on github.

Solved the issue, by moving the publish_to method from create.js.erb file to index.html.erb, where I can keep track of the current user. So now the publish_to method is like this:

$(function() {
        PrivatePub.subscribe("/chats/index", function(data, channel) {
         $('.discBox .userPost').removeClass('new');
         $('#message_box').val('');
         var current_user = $('#user').val();
        if (current_user == data.user){ 
            $('.discBox').append(msg("myMsg",data.message,'right')).find('.userPost:last').addClass('new');
        }           
        else{
            $('.discBox').append(msg("memberMsg",data.message,'left')).find('.userPost:last').addClass('new');
        }

    });