title: Next tab with button
body: <p>Hello I have the body form HTML code</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="page-content" class="header-clear"&gt;
  
      &lt;div id="page-content-scroll"&gt;&lt;!--Enables this element to be scrolled --&gt; 
  
  
  
              &lt;div class="content padding-content-tab"&gt;
                  &lt;div id="test-tab"&gt;
                      &lt;div class="row"&gt;
                          &lt;ul class="tabs padding-tab"&gt;
                              &lt;div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1"&gt;
                                  &lt;li class="tab-link" &gt;&lt;a href="#tabs-1"&gt;Step 1&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 orange-tab text-center" data-tab="tabs-2"&gt;
                                  &lt;li class="tab-link" &gt;&lt;a href="#tabs-2"&gt;Step 2&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;
                              &lt;div class="col-xs-4 orange-tab text-center" data-tab="tabs-3"&gt;
                                  &lt;li class="tab-link" &gt;&lt;a href="#tabs-3"&gt;Step 3&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
  
                      &lt;div id="tabs-1" class="tab-content current"&gt;
                          &lt;div class="tab-elements"&gt;
  
                              &lt;div class="text-center"&gt; 
                                  &lt;button id="next_button" name="next_button" class="next-button"&gt;Next&lt;/button&gt; 
  
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="tabs-2" class="tab-content"&gt;
                          &lt;div class="tab-elements"&gt;
                              dolore magna aliqua. Ut enim ad minim veniam, quis
                              nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="tabs-3" class="tab-content"&gt;
                          &lt;div class="tab-elements"&gt;
                             a commodo consequat.
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And here is my JS</p>
  
  <pre><code>    $('#next_button').click(function(){
          var tab_id = $('ul.tabs div.orange-tab').attr('data-tab');
  
          $('ul.tabs div.orange-tab').removeClass('current');
          $('div.tab-content').removeClass('current');
  
          $('ul.tabs div.orange-tab').addClass('current');
          $("#"+tab_id).addClass('current');
      });
  </code></pre>
  
  <p>That's how i've tried to change the tab but won't work. What any solution can I try? I want to press the button 'Next' and to change the tab. I want a simple solution but to work.</p>