How do I make my button reveal one item at a time?

Question

I have created a list which I want to keep hidden from the user, and a button which I want to use to reveal the list items one by one. I am using jquery and css to hide/display the list items.

My code works fine to reveal the first 'clue' but my question is how do I make the button reveal the second clue on a second click, and then the third clue on a third click. And then after the third click I would like to make the button redundant. Thanks in advance

$(document).ready(function() {
  $(".help").click(function() {
    $('li.hide-1').removeClass('hide-1');
  });
});

.hide-1,
.hide-2,
.hide-3 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clues">
  <ul>
    <li class="hide-1">Right winger</li>
    <li class="hide-2">Established himself in the Bundesliga</li>
    <li class="hide-3">England International</li>
  </ul>
</div>
<div class="button">
  <button type="button" class="help">I need help</button>
</div>

Answer 1

I'd recommend storing a count of how many times the button has been clicked, and then use this number for each time you remove the class. Something like:

var buttonCount = 0;
$(document).ready(function() {
    $(".help").click(function() {
        buttonCount += 1;
        $(`li.hide-${buttonCount}`).removeClass(`hide-${buttonCount}`);
    });
});

After the list is complete then the button should do nothing, but there are ways to remove it too. This might include having a limit and when you reach that limit use jquery to hide the button or disable it. Or to count the number of items with the class starting with hide, and if there are none then disable the button.

Good luck.