Bootstrap Tabs: Next & Previous Buttons for Forms

Question

I am trying to (eventually) split a form over several Bootstrap 3.x tabs, but I am having trouble with the previous and next buttons. Only the first next button functions an

Answer 1

First at All : ID MUST BE UNIQUE

Here is your working code : http://www.bootply.com/120472

HTML :

    
Shipping
    
Quantities
    
Summary


    

        Next
    
    

        Next
        Previous
    
    

        Previous
    

JS :

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

Snippet:

 $('.btnNext').click(function(){
  $('.nav-tabs > .active').next('li').find('a').trigger('click');
});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

    
Shipping
    
Quantities
    
Summary


    

        Next
    
    

        Next
        Previous
    
    

        Previous