JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="titles">
  <li class="sexystory selected"><h3>Sexy Story</h3></li>
  <li class="jewel"><h3>Jewel</h3></li>
  <li class="johnboy"><h3>John Boy</h3></li>
  <li id="w"></li>
  <li id="x"></li>
</ul>

<div class="lyrics">
  <article class="sexystory shown">
    <h4>SEXY STORY</h4>
  </article>
  <article class="jewel">
    <h4>JEWEL</h4>
  </article>
  <article class="johnboy">
    <h4>JOHN BOY</h4>
  </article>
</div>

CSS

.lyrics {
    margin:50px;
}
.selected {
  text-decoration:underline;
}
.lyrics article {
  display:none;
  text-align:left;
  background:grey;
  color:white;
  text-align:center;
}
.lyrics article:first-child {
  display:block;
}

JavaScript

$('.titles li').click(function() {
    $(this).addClass('selected').siblings().removeClass('selectd');

    var selected = $(this).attr('class').replace(' selected', ''),
        next = $('.lyrics article').hasClass(selected);
    
    $('#w').html(selected); //for testing, shows what the value is
    $('#x').html(next); //ditto

    $('.shown').fadeOut(400, function() {
        $(this).removeClass('shown');
        next.fadeIn(400).addClass('shown');
    });
});