JSFiddle - React, Tailwind, and code Playground

HTML

<button data-id="first" class="select_visible">Visible first</button>
<button data-id="second" class="select_visible">Visible second</button>
<button data-id="third" class="select_visible">Visible third</button>
<button data-id="fourth" class="select_visible">Visible fourth</button>

<button class="clear-select_visible">Clear</button>

<div rel="first" class="select">first</div>
<div rel="second" class="select">second</div>
<div rel="third" class="select">third</div>
<div rel="fourth" class="select">fourth</div>

CSS

.select {
  width: 50px;
  height: 50px;
  border:1px solid;
  margin: 5px;
}

JavaScript

var $buttons = $('.select_visible');
var $selects = $('.select');
var $clearButton = $('.clear-select_visible');

$buttons.on('click', function(){
	var $this = $(this);
  var id = $this.data('id');
  
  $selects.not('[rel='+ id +']').fadeOut(100);
  $selects.filter('[rel='+ id +']').delay(100).fadeIn();
});

$clearButton.on('click', function(){
	$selects.fadeOut(100);
});