JSFiddle - React, Tailwind, and code Playground

HTML

<div id="facts">
    <span id='removeme'>Click to cycle</span>
    <span class='cycleme'>note 1</span>
             <span class='cycleme'>note 2</span>
             <span class='cycleme'>note 3</span>
             <span class='cycleme'>note 4</span>
</div>

CSS

#removeme {
   display: inline;
}
span.cycleme {
 display:none;   
}

JavaScript

$(document).ready(function() {
    var current = 1;

   // Bind the first one's onclick to remove itself
   $('#removeme').click(function() {
      $(this).remove();
      // And show the first
      $('#facts span.cycleme:first-child').show();
   });


   // Target the others via their class
   $('#facts span.cycleme').click(function() {
              // Hide all of them
              $('#facts span').hide();
              // Unhide the current one:
              $('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
              // Increment the variable
              console.log(current % 4);
              current++;
          });

});