JSFiddle - React, Tailwind, and code Playground

by Anirudh Tewathia

HTML

<div class="container1">
    <div class="block1 block">
         <h3>Header 1</h3>

    </div>
    <div class="block2 block">
         <h3>Header 2</h3>

    </div>
    <div class="block3 block">
         <h3>Header 3</h3>

    </div>
    <div class="block4 block">
         <h3>Header 4</h3>
    </div>
    <div class="block5 block">
         <h3>Header 5</h3>
    </div>
</div>
<div class="container2">
    <div class="block1 block">
         <h3>Header 1</h3>

    </div>
    <div class="block2 block">
         <h3>Header 2</h3>

    </div>
    <div class="block3 block">
         <h3>Header 3</h3>

    </div>
    <div class="block4 block">
         <h3>Header 4</h3>

    </div>
    <div class="block5 block">
         <h3>Header 5</h3>

    </div>
</div>

CSS

.container1, .container2 {
    float:left;
    margin-left: 20px;
}

JavaScript

$('h3').click(function () {
    console.log('click');
    var parentClass = $(this).parent().attr('class');
    $('.' + parentClass.split(' ').join('.')).hide();
});