JSFiddle - React, Tailwind, and code Playground

HTML

<button id="Ck">Click</button>
<button id="Me">Mouseover</button>
<br/>
<br/>
<br/>
<div id="Wp" style="width: 100px; height: 100px; background-color: #3333FF;"></div>

JavaScript

var aniMinWidth = 100;
var aniMaxWidth = 500;

function SetupClick() {
    // Remove mouse events first
    $("#Wp").off("mouseout.bobsyouruncle");
    $("#Wp").off("mouseenter.bobsyouruncle");
    
    $("#Wp").on("click.bobsyouruncle", function() {
        var animateWidth = $(this).width() > aniMinWidth ? aniMinWidth : aniMaxWidth;
        
        $(this).animate({"width":animateWidth}, "slow");
    });  
}

function SetupMouseover() {
   // Remove click event first
  $("#Wp").off("click.bobsyouruncle");
    
  $("#Wp").on("mouseenter.bobsyouruncle", function(){
        $("#Wp").animate({"width":aniMaxWidth},"slow");
   });
    
   $("#Wp").on("mouseout.bobsyouruncle", function(){
        $("#Wp").animate({"width":aniMinWidth},"slow");
	});
}

$('#Ck').click(function() {
  SetupClick();
  // Optionally, save choice
  localStorage['userchoice'] = 'click';
});
$('#Me').click(function() {
  SetupMouseover();
  // Optionally, save choice
  localStorage['userchoice'] = 'mouseover';
});