JSFiddle - React, Tailwind, and code Playground

by nosfan1019

HTML

<div class='top'>    
    <div id='fff' class="aaa">
        <input type='text'>
        <input type='text'>
        <input type='text'>
        <div class='dummy'></div>        
    </div>
    <div id='fff' class="bbb">
        <input type='text'>
        <input type='text'>
        <input type='text'>
        <div class='dummy'></div>        
    </div>
</div>
<p class='xxx'></p>
<p class='yyy'></p>
<p class='zzz'></p>

CSS

body {
    margin: 50px;
}

.aaa, .bbb {
    margin: 20px 0;
    background: #eee;
    padding: 20px;
}
.dummy {
    display: inline-block;
}

.nnn {
    background: pink;
    border: 1px solid red;
}

JavaScript

$(function() {
    

    
    $('body').mousedown(function(e) {
        var foo = $(e.target).closest('#fff').attr('class');
        
        var $foo = $('.' + foo);
        
        if ($(e.target).is('input')) {
            $foo.find('.dummy').html('<a href="#">hello</a>');
        } 

        
        
        
            
        $('.xxx').text(foo);
        
        
    });
    
    
});