Unknown error

HTML & CSS
1

Why submitted text not appear in white box and getting auto response?

Here is my code please tell me what’s my mistake…

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>var 
  $send = $('.wchat-send'),
  $input = $('.wchat-input'),
  $messages = $('.wchat-messages'),
  sendable = true;

function addMessage(msg, kind){
  var replyClass = '';
  
  if (kind == 'reply'){ 
    replyClass = 'wchat-message-reply';
  }
  
  if (kind == 'wait'){ 
    replyClass = 'wchat-message-reply wchat-message-reply wchat-message-wait';
  }
  
  msg = '<div class="wchat-message '+replyClass+'"><div>'+msg+'</div></div>';
  
  $messages.append(msg);
  $messages.animate({ scrollTop: $messages.prop("scrollHeight")}, 1000);

}function turnSendable(onoff){
  if( onoff == 'on' ){
    sendable = true;
    $send.css('opacity','1');
  }else{
      sendable = false;
      $send.css('opacity','.5');
  }
}

function sendMessage(){
    var msg = $input.val();
    if(msg != '' && sendable){
      addMessage(msg,'send');
      turnSendable('off');
      addMessage('...','wait');
      
      setTimeout(function(){
        $('.wchat-message-wait').remove();
        addMessage('I dont know what you are talking about','reply');
        turnSendable('on');
      }, 1000);
      
      $input.val('');
    }
}

$send.on('click', function(){
  sendMessage();
});

$(document).keypress(function(e) {
    if(e.which == 13) {
        sendMessage();
    }
});</script>


<style>html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.wchat{
  width: 350px;
  background-color: lightblue;
  padding: 20px;
  
}

.wchat-messages{
  width: 100%;
  height: 300px;
  background-color: white;
  padding-left: 10px;
  padding-right: 10px;
  overflow: auto;
  
  
}.wchat-makemessage{
  margin-top: 20px;
  clear: both;
}
.wchat-input{
  width: 75%;
}
.wchat-send{
  width: 20%;
}

.wchat-message{
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  
  div{
    background-color: pink;
    color: maroon;
    padding: 10px;
    margin-left: 25%;
    border-radius: 7px;
  }
}

.wchat-message-reply{

  div{
    background-color: lightgreen;
    color: green;
    margin-left: 0;
    margin-right: 25%;
  }
}</style>
<div class="wchat">
  <div class="wchat-messages">
    
  </div>
  
  <div class="wchat-makemessage">
    <input class="wchat-input" name="wchat-input" />
    <button class="wchat-send">SEND</button>
  </div> 
</div>

Online preview: https://codepen.io/larryarmstrong/pen/JRBGxm then it work