JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
    <a href="">element1</a> <span>span1</span> <br>
</div>

<div class="item">
<a href="">element2</a> <span>span2</span><br>
</div>
    
<div class="item">
<a href="">element3</a> <span>span3</span><br>
</div>
    
<div class="item">
<a href="">element4</a> <span>span4</span><br>
</div>

JavaScript

$('.item span').hide();

var all_spans = $('.item a').parent().find('span');

$('.item a').click(function(e){
    
    e.preventDefault();
    // hide all span
    all_spans.hide();
    $this = $(this).parent().find('span');
    // here is what I want to do
    if ($this.is(':hidden')) {
         $(this).parent().find('span').show();
    } else {
         $(this).parent().find('span').hide();
    }
    
});