JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<div class="box box-one">
    <button class="remove-box box-one">Remove</button>
</div>
<div class="box box-two">
    <button class="remove-box box-two">Remove</button>
</div>
<div class="box box-three">
    <button class="remove-box box-three">Remove</button>
</div>

CSS

div {
    width: 200px; height: 200px;
    float: left;
    margin: 5px;
}
div.box-one {
    background: green;
}
div.box-two {
    background: yellow;
}
div.box-three {
    background: blue;
}

JavaScript

$('.remove-box').click(function () {
    //var element = $(this);
    var boxClass = $(this).attr('class').split(/\s+/);
    $(boxClass).each(function () {
        if(this != "remove-box"){
            $("."+this).hide()
        }
    });
    if ($('.remove-box') != null && $('.remove-box').length< 2 ) {
        $(this).attr('disabled','disabled');
    }
});