<style type="text/css">
.media-action-bar {
    padding:10px;
    display:block;
}

.likeBtn {
    transition: background 0.5s;
}
.likeBtn.liked {
    background-color:#E68181;
    border-color:#D66969;
}

.formControlLike {
  width: 400px;
    border-radius: 10px;
    resize: none;
    height: 44px;
    padding: 10px;
    font-size: 14px;
}

.likeBtn {
  background: #2c73b5;
  padding: 5px 10px;
  text-decoration: none;
  border: 1px solid #00519c;
  color: #fff;
  font-weight: none;
  border-radius: 6px;
}
</style>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="media-action-bar">
              <!-- Comment-box -->
              <div class="comments">
                  <div class="comment-box">
                      <form id="formForLike">
                      <textarea class="formControlLike" rows="3" placeholder="Describe why you want to like this person" required></textarea>
                      <br/>
                      <button type="submit" class="likeBtn" href="#">&#128077;<span id="likeText">Like</span> <b>(<span id="likeNumber">0</span>)</b></button>
                      </form>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
  $("#formForLike").on("submit", function(e) {
    e.preventDefault();
    $(".formControlLike").css('display','none');
    $("#likeText").html("You liked person");
    $(".likeBtn").addClass("liked");
    $("#likeNumber").html("1");
  });
});
</script>