I am facing an issue while displaying thumbs up and thumbs down after every response for my chatbot and it should display a different message for both thumbs up and thumbs down.

I have used JS which is able to display the icon and change its color on hover but I'm unable to achieve the response.

var feedback = document.createElement("div");
feedback.className = "rating";
responsePara.appendChild(feedback);
// like button
var like = document.createElement("div");
like.className = "like grow";
var thumbsUp = document.createElement('i')
thumbsUp.className = "fa fa-thumbs-up fa-2x like";
thumbsUp.ariaHidden = true;
feedback.appendChild(like);
like.appendChild(thumbsUp)

// dislike button
var dislike = document.createElement("div");
dislike.className = "dislike grow";
var thumbsDown = document.createElement('i')
thumbsDown.className = "fa fa-thumbs-down fa-2x  dislike";
thumbsDown.ariaHidden = true;
feedback.appendChild(dislike);
dislike.appendChild(thumbsDown)
$('.like, .dislike').on('click', function() {
      event.preventDefault();
      $('.active').removeClass('act`enter code here`ive');
      $(this).addClass('active');
})