jQuery Next button on multiple pages

Question

Previously I have this: Jquery to display next button once a input button is clicked

Now I need to get this button on the next slide to function in the same way as the first slide. Please see my code:

DEMO CODE Just a snipped below

    <input type="radio" name="options" id="option2" name="1" class="a"> <span class="label num" style="font-size:18px; margin-bottom:15px; border-radius:0px;">A</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

  <label class="btn btn-default">
    <input type="radio" name="options" id="option2" name="1" class="b"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">B</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

  <label class="btn btn-default">
    <input type="radio" name="options" id="option3" name="1" class="c"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">C</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

   <label class="btn btn-default">
    <input type="radio" name="options" id="option3" name="1" class="d"> <span class="label num" style="font-size:18px;margin-bottom:15px;border-radius:0px;">D</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  </label>

</div>
<br / >
<br / >

<div align="left">
<button id= "nextbtn" class="btn btn2 btn-default" name="next" style>Next</button>
</div>
    </div>

Answer 1

Your code is working for sliding, issues is in the next button display. As you have used below code to show/hide button where you have used id="nextbtn" for both next button.

$(function(){
  $('#nextbtn').hide();
  $('input:radio').change(
    function(){
       $('#nextbtn').show();
    }
);   

In jQuery, you must not use same id for multiple elements, so either remove it or rename it to unique ids.

lets say id="namebtn1" and id="namebtn2" , and modify below code

$("button[name=next]").click(function (e) {
        //hide current button after click
        $(this).hide();
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).fadeIn(); // show next
    });

  $(function(){
     //hide button
     $('button[name=next]').hide();
     $('input:radio').change(
        function(){
         //show button for clicked div
         $(this).closest('div[class^=item]').find('button[name=next]').show();
     });          
  });

jsfiddle demo

NOTE - you have $(document).ready(... and $(function(){.. in your code, both are meant for same purpose ie run script after all DOM elements loads and no need to put multiple time (though your code will work).

So remove either of them and put whole script inside one (ie $(document).ready(... or $(function(){.. ) as shown here

Answer 2

updated, see http://jsfiddle.net/dvgxga2j/18/

$(document).ready(function () {
    var divs = $('.wrapper>div');
    var now = 0; // currently shown div
    divs.hide().first().fadeIn();
    $("button[name=next]").click(function (e) {                
        divs.eq(now).hide();
        now = (now + 1 < divs.length) ? now + 1 : 0;
        divs.eq(now).fadeIn();
        $(e.target).hide();
    });
});

you can just move the next button outside and hide it after showing the next div