JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text"  />
<a href="#" class="first">first</a>
<a href="#" class="second">second</a>
<a href="#" class="third">third</a>
<div id="mydiv" class='mydiv'>howdy</div>

CSS

.first { border:solid 1px #F00 }
.second { border:solid 1px #0F0 }
.third { border:solid 1px #00F }
.redbrd{background-color: #dddddd; margin:4px;}

JavaScript

$(function() {
    $('a').click(function() {
        $('input').removeClass().addClass($(this).attr('class'));
        $('input').trigger('classChange');
    });
    $('input').on('classChange', function() {
        $('input').eq(0).val("howyd " + $(this).attr('class'));
    });
});

//});
//$(".chzn-select").chosen();
$(function() {
    $('a').click(function() {
        $('.mydiv').removeClass().addClass($(this).attr('class') + ' redbrd mydiv');
    });
    $('body').on('mouseenter', '.redbrd', function() {
       $('body').append('<div id="mmt">some text</div>');
    });
    $('body').on('mouseleave', '.redbrd', function() {
        $('#mmt').remove();
    });
});