How to select the next item with the same class?

Question

My question has two parts:

• How to select the next element with the same class and hide the previous one?
• How to add each hidden input value, the value of the pressed button? Say I click a button with a no class. I want the no to go into it, hiding the meaning of the question. How to do it?

Thank you very much. Any help would be greatly appreciated.

This is what I have so far:

HTML:

$('.answer_buttons a').on('click', function(e){ e.preventDefault(); $('.selected').removeClass('selected').hide().next().show().addClass('selected'); $.ajax({ type: "POST", url: '', data: {}, success: function(msj){ //alert('test'); //console.log(msj); } }); }); 

 <form action="" method="post"> <input name="intr1" value="" type="hidden"> <p class="question selected" id="intreb_1"> Intrebarea 1?</p> <input name="intr2" value="" type="hidden"> <p class="question " id="intreb_2"> Intrebarea 2?</p> <input name="intr3" value="" type="hidden"> <p class="question " id="intreb_3"> Intrebarea 3?</p> <input name="intr4" value="" type="hidden"> <p class="question " id="intreb_4"> Intrebarea 4?</p> <input name="intr5" value="" type="hidden"> <p class="question " id="intreb_5"> Intrebarea 5?</p> <div class="answer_buttons"> <a class="nu" href=""></a> <a class="da" href=""></a> </div> </form> 

Answer 1

It seems you want to select the next sibling .question current .question.selected element. You can use the .nextAll() and .first() methods for this:

 $('.selected').removeClass('selected') .hide() .nextAll('.question') .first() .show() .addClass('selected'); 

And to update the value of the previous input sibling with the className element with a click, you can use the .prev() and .val() methods.

 $('.selected')... .addClass('selected') .prev('input') .val($(this).hasClass('nu') ? 'no' : 'yes');