JSFiddle - React, Tailwind, and code Playground

by janetyc

HTML

<div id="add">add</div>
<div id="remove">remove</div>
<input/><span></span>

CSS

div:hover{
    background: yellow;
}
.select{
    display: block;
    border: 1px solid #ff0000;
}

JavaScript

function addFun(){
    $(this).addClass("select");
}
function removeFun(){
    $(this).removeClass("select");
}
function focusFun(){
    $("span").text($(this).val());
}

$("#add").click(function(){
    $("input").bind("mouseover",addFun);
    $("input").bind("mouseout", removeFun);
    $("input").bind("keyup", focusFun);
    $("span").text($(this).val());
    
});

$("#remove").click(function(){
    $("input").unbind("mouseover", addFun);
    $("input").unbind("mouseout", removeFun);
    $("input").unbind("keyup", focusFun);
    
});