Show/Hide JQuery - How to remove previous text once a new item is selected?

Question

I have created a hover function that shows text on hover and stays once checked. However, when I select a new item the previously selected text stays. I want only to display the corresponding text.

I've used this code below created by someone else and they have the same issue when selecting certain parts. See the JSFiddle below:

https://jsfiddle.net/h7fua94s/5/

$(document).ready(function() {
  $('.btn').hover(function() {
    var id = $(this).attr('data-id');
    $('.b-' + id + '-text').show();
  }, function() {
    $('.b-text').hide();
  }).on('click', function() {
    var id = $(this).attr('data-id');
    $('.b-' + id + '-text').toggleClass('selected');
  });
});

.col-xs-5ths {
  width: 20%;
  float: left;
}

.b-text {
  display: none;
}

.selected {
  display: block!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid text-center">
  <div class="row">
    <h1>Title</h1>
  </div>
  <div class="row">
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
    </div>
    <div class="col-xs-5ths">
      <button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
    </div>
  </div>
  <div class="row btn-text">
    <div class="b-1-text b-text">
      <h3>Button 1 Text</h3>
    </div>
    <div class="b-2-text b-text">
      <h3>Button 2 Text</h3>
    </div>
    <div class="b-3-text b-text">
      <h3>Button 3 Text</h3>
    </div>
    <div class="b-4-text b-text">
      <h3>Button 4 Text</h3>
    </div>
    <div class="b-5-text b-text">
      <h3>Button 5 Text</h3>
    </div>
  </div>
</div>

Answer 1

The below should do what you're after...

$(document).ready(function() {

  /**
   * @type {jQuery} $buttons All our buttons.
   */
  const $buttons = $('.btn');

  /**
   * @type {jQuery} $texts All our texts.
   */
  const $texts = $('.b-text');

  // Listen for our hover in/out and click events.
  $buttons.on('mouseenter mouseleave click', function(event) {

    /**
     * @type {jQuery} $button The current button jQuery object.
     */
    const $button = $(this);

    /**
     * @type {string} buttonId The current button [data-id] value.
     */
    const buttonId = $button.data('id');

    /**
     * @type {jQuery} $text The text element related to the current buutton.
     */
    const $text = $texts.filter(`.b-${buttonId}-text`);
    
    /**
     * @type {jQuery} $otherTexts All the other text elements EXCLUDING the current text element.
     */
    const $otherTexts = $texts.not($text);

    // Hover-in
    if (event.type === 'mouseenter') {
      // Show our current text
      $text.show();

      // Hide selected texts and add a reminder class so we can re-select them on hover-out.
      $otherTexts.filter('.selected').removeClass('selected').addClass('to-be-selected');
    }

    // Hover-out
    else if (event.type === 'mouseleave') {
      // Hide our current text.
      $text.hide();

      // Reset selected texts and remove reminder class.
      $otherTexts.filter('.to-be-selected').removeClass('to-be-selected').addClass('selected');
    }

    // Clicked 
    else if (event.type === 'click') {
      // On click, reset all previously selected texts.
      $otherTexts.removeClass('selected to-be-selected');

      // Now select/deselect our current text.
      $text.toggleClass('selected');
    }


  });

});

.col-xs-5ths {
  width: 20%;
  float: left;
}

.b-text {
  display: none;
}

.selected {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  <div class="container-fluid text-center">
    <div class="row">
      <h1>Title</h1>
    </div>
    <div class="row">
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
      </div>
    </div>
    <div class="row btn-text">
      <div class="b-1-text b-text">
        <h3>Button 1 Text</h3>
      </div>
      <div class="b-2-text b-text">
        <h3>Button 2 Text</h3>
      </div>
      <div class="b-3-text b-text">
        <h3>Button 3 Text</h3>
      </div>
      <div class="b-4-text b-text">
        <h3>Button 4 Text</h3>
      </div>
      <div class="b-5-text b-text">
        <h3>Button 5 Text</h3>
      </div>
    </div>
  </div>
</body>

I'm basically adding a reminder class (to-be-selected) to the selected text elements allowing us to hide the selected text when hovering other buttons and then re-select them when we hover out.