JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" onsubmit="return false;">
    <input type="text">
    <!--<input type="submit">-->
</form>
 <form id="form1" onsubmit="return false">
    <input type="text">
    <input type="submit">
</form> 
<div id="message">
</div>

JavaScript

$('#form').bind( 'click', function(){ 
    $('#message').append("<div>click</div>") 
} )
$('#form').bind( 'keydown', function(){ 
        $('#message').append("<div> keydown </div>") 
} ) 
$('#form').bind( 'keyup', function(){ 
        $('#message').append("<div> keyup </div>") 
} ) 
$('#form').bind( 'submit', function(){ 
        $('#message').append("<div> submit </div>") 
} ) 
$('#form').bind( 'keypress', function(){ 
        $('#message').append("<div> keypress </div>") 
} )
     
$('#form1').bind( 'click', function(){ 
    $('#message').append("<div>click</div>") 
} )
$('#form1').bind( 'keydown', function(){ 
        $('#message').append("<div> keydown </div>") 
} ) 
$('#form1').bind( 'keyup', function(){ 
        $('#message').append("<div> keyup </div>") 
} ) 
$('#form1').bind( 'submit', function(){ 
        $('#message').append("<div> submit </div>") 
} ) 
$('#form1').bind( 'keypress', function(){ 
        $('#message').append("<div> keypress </div>") 
} )