JSFiddle - React, Tailwind, and code Playground

HTML

<p class="question active" id="q_1">
    Question 1?
  </p>
  <p class="question " id="q_2">
    Question 2?
  </p>
  <p class="question " id="q_3">
    Question 3?
  </p>
  <p class="question " id="q_4">
    Question 4?
  </p>
  <p class="question " id="q_5">
    Question 5?
  </p>

  <a class="button">Click me</a>

CSS

.active{
    background-color: red;
}
a.button{
    cursor:pointer;
}

JavaScript

$('.button').click(function() {
    if ($('p.question').length > 0) {
        $('p.question').each(function() {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
                var thisIndex = parseInt($(this).attr('id').match(/\d+/));
                console.log(thisIndex)
                if (thisIndex < $('p.question').length) {
                    $('#q_' + (thisIndex + 1)).addClass('active');
                }
                else  $('#q_1').addClass('active');
            }
        });
    }
});