I don't know what's wrong with my code am not getting the intended output. Anybody to lend a helping hand and I'll really appreciate it.

If append the row class inside the for loop am getting all the messages but you can't differentiate who sent and who received and when I append the class outside the for loop am only getting one message.

xhr.onload = function () {
  var messages = [
    { id: 36, message: "hay here", username: null, senderId: 1, receiverId: 9 },
    { id: 38, message: "hay there again", username: null, senderId: 1, receiverId: 9 },
    { id: 37, message: "yes  hay", username: null, senderId: 9, receiverId: 1 },
  ];
  
  var rowClass = "";

  for (var message = 0; message < messages.length; message++) {
    if (messages[message].senderId === messages[message].senderId) {
      rowClass =
        '<div style="text-align:right">' +
        '<p style="background-color:lightblue">' +
        mymessages[message].message +
        "</p>" +
        "<div>";
    } else {
      rowClass =
        '<div style="text-align:left">' + '<p style="background-color:green">';
      messages[message].message;
      "</p>" + "<div>";
    }
  }
  $(".message").append(rowClass);
};