javascript - How to select next element with unique id on each anchor click? -

i have active class on first element , want when click on anchor add active class next element, id , class of element active class javascript.

i want using $(this). how that?

  <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" href=""></a>

i've used next jquery code don't that:

$('.button').on('click', function(e){      e.preventdefault();      $('.active').removeclass('active').hide().next().show().addclass('active');  });

next not works. example, when active element last (so q_5 in example), next return empty jquery collection.

and if can, better avoid show , hide in jquery. use active class that.

$('a').click(function(e){      e.preventdefault();            var $next = $('p.active').removeclass('active').next('p.question');        if (!$next.length) {          $next = $('#q_1');      }        $next.addclass('active');  });

p:not(.active) {      display : none;    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <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" href="">change</a>