JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div id="container">
    
    <input type="text" value="" placeholder="Text 1" class="txt1" />
    <br/><br/>
    
    <input type="text" value="" placeholder="Text 2" class="txt2" />
    <br/>
    <div class="notice">
      
    </div>
    
    
  </div>

CSS

.notice.error {
  color:#990000!important;
}
.notice.success {
  color:#28a745!important;
}

JavaScript

$(function() {
  
  $.fn.extend({
  Test: function() {
    const $master = this;
    
    const $t1 = $master.find(".txt1"),
          $t2 = $master.find(".txt2"),
          $notice = $master.find(".notice");
    
    function Check() {
      $notice.removeClass("error success").hide();
      if ($t1.val().length === 0 && $t2.val().length === 0) {
        console.log("returning");
        return;
      }
      if ($t1.val() == $t2.val()) {
        $notice.addClass("success").text("Text Matches!").show();
      }
      else{
        $notice.addClass("error").text("Text Does Not Match").show();
      }
    }
    
    $t1.on("keyup", Check);
    $t2.on("keyup", Check);
    
    function GetResult() {
      return $t1.val() == $t2.val();
    }
  
   }
});
  
var $test = $("#container").Test();
  
  
});