JSFiddle - React, Tailwind, and code Playground

by darkajax

HTML

<div><i>AAAA</i> <input type="text" \><br></div>
<div><i>BBBB</i> <input type="text" \><br></div>

CSS

input:hover +  {
    color:blue;
    font-weight:bold;
    background: black;
}

JavaScript

/*jQuery('input').on({
    focusin: function(){
        jQuery(this).css({'color':'blue', 'font-weight':'bold'});
    },
    focusout: function(){
        jQuery(this).css({'color':'black', 'font-weight':'normal'});
    }
});*/

jQuery('input').on('change', function(){
    jQuery(this).next('br').after('<div><i>XXXX</i><input type="text" \><br></div>');
})