what should i do to add inline css to dynamically created elements with javascript?

(function() {
  var Message;

  Message = function({
      text: text1,
      message_side: message_side1
    }) {
    this.text = text1;
    this.message_side = message_side1;
    this.draw = () => {
      var $message;
      $message = $($('.message_template').clone().html());
      $message.addClass(this.message_side).find('.text').html(this.text);
      $('.messages').append($message);
      $("li.message.left > div.text_wrapper > p").css('color', 'red');
      $("li.message.right > div.text_wrapper > p").css('color', 'blue');
      
      return setTimeout(function() {
        return $message.addClass('appeared');
      }, 0);
    };
    return this;
  };

  $(function() {
    var getMessageText, message_side, sendMessage;
    message_side = 'right';
    getMessageText = function() {
      var $message_input;
      $message_input = $('.message_input');
      return $message_input.val();
    };
    sendMessage = function(text) {
      var $messages, message;
      if (text.trim() === '') {
        return;
      }
      $('.message_input').val('');
      $messages = $('.messages');
      message_side = message_side === 'left' ? 'right' : 'left';
      message = new Message({text, message_side});
      message.draw();
      return $messages.animate({
        scrollTop: $messages.prop('scrollHeight')
      }, 300);
    };
    $('.send_message').click(function(e) {
      return sendMessage(getMessageText());
    });
    $('.message_input').keyup(function(e) {
      if (e.which === 13) { // enter key
        return sendMessage(getMessageText());
      }
    });
  });

}).call(this);

* {
  box-sizing: border-box;
}
.chat_window {
  position: absolute;
  width: calc(100% - 20px);
  max-width: 600px;
  height: 440px;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 1px solid #ddd;
  overflow: hidden;
}
.messages {
  position: relative;
  list-style: none;
  padding: 20px 10px 0 10px;
  margin: 0;
  height: 347px;
  overflow: scroll;
}
.messages .message {
  clear: both;
  overflow: hidden;
  margin-bottom: 20px;
  transition: all 0.5s linear;
  opacity: 0;
}
.messages .message.left .text_wrapper {
  background-color: #ddd;
  margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
  right: 100%;
  border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
  color: #000;
  margin: 0;
}
.messages .message.right .text_wrapper {
  background-color: #ddd;
  margin-right: 20px;
  float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
  left: 100%;
  border-left-color: #ddd;
}
.messages .message.appeared {
  opacity: 1;
}
.messages .message .text_wrapper {
  display: inline-block;
  padding: 20px;
  width: calc(100% - 85px);
  min-width: 100px;
  position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
  top: 18px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.messages .message .text_wrapper::after {
  border-width: 13px;
  margin-top: 0px;
}
.messages .message .text_wrapper::before {
  border-width: 15px;
  margin-top: -2px;
}
.messages .message .text_wrapper .text {
  font-size: 18px;
  font-weight: 300;
}

.bottom_wrapper {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 20px 20px;
  position: absolute;
  bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
  display: inline-block;
  height: 50px;
  border: 1px solid #bcbdc0;
  width: calc(100% - 160px);
  position: relative;
  padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
  border: none;
  height: 100%;
  box-sizing: border-box;
  width: calc(100% - 40px);
  position: absolute;
  outline-width: 0;
  color: gray;
}
.bottom_wrapper .send_message {
  width: 140px;
  height: 50px;
  display: inline-block;
  background-color: #ddd;
  border: 2px solid #ddd;
  color: #000;
  cursor: pointer;
  transition: all 0.2s linear;
  text-align: center;
  float: right;
}
.bottom_wrapper .send_message:hover {
  color: #000;
  background-color: #fff;
}
.bottom_wrapper .send_message .text {
  font-size: 18px;
  font-weight: 300;
  display: inline-block;
  line-height: 48px;
}

.message_template {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
  <ul class="messages"></ul>
  <div class="bottom_wrapper clearfix">
    <div class="message_input_wrapper">
      <input class="message_input" placeholder="Type here..." />
    </div>
    <div class="send_message">
      <div class="icon"></div>
      <div class="text">
        Send
      </div>
    </div>
  </div>
</div>
<div class="message_template">
  <li class="message">
    <div class="text_wrapper">
      <p class="text"></p>
    </div>
  </li>
</div>