title: Adding a Next and Previous button to switch tabs
body: <p>I have created a form that goes across three different tabs named 'contact-tab' 'questions-tab' 'delivery-tab'. I am trying to add Next and Previous buttons to flick through these tabs. Currently you can click on the tab name to get to that page, But I want to replace this with the next and previous buttons. But i cant seem to crack it.</p>
  <p>I have tried various pieces of code from all over. And for some reason none of it works. I have replaced my code with there's completely and still doesn't work. --EDIT--</p>
  <p>When i press the button nothing happens, so i am unsure what is happening.</p>
  <p>Im not good with JS myself so i couldnt make up a function myself. But i have tried different things from posts. Below is an example of what i have done most recently. I have chopped it all down so it is a minimal reproducible code snippet.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
          $(document).ready(function(){
          $('a[data-bs-toggle="tab"]').on("shown.bs.tab", function(e){
              console.log(e.target); // newly activated tab
              console.log(e.relatedTarget); // previous active tab
              });
          });
      &lt;/script&gt;
      &lt;script&gt;
          function bootstrapTabControl(){
              var i, items = $('.nav-link'), pane = $('.tab-pane');
              // next
              $('.nexttab').on('click', function(){
                  for(i = 0; i &lt; items.length; i++){
                      if($(items[i]).hasClass('active') == true){
                          break;
                      }
                  }
                  if(i &lt; items.length - 1){
                      // for tab
                      $(items[i]).removeClass('active');
                      $(items[i+1]).addClass('active');
                      // for pane
                      $(pane[i]).removeClass('show active');
                      $(pane[i+1]).addClass('show active');
                  }
  
          });
          // Prev
          $('.prevtab').on('click', function(){
              for(i = 0; i &lt; items.length; i++){
                  if($(items[i]).hasClass('active') == true){
                      break;
                  }
              }
              if(i != 0){
                  // for tab
                  $(items[i]).removeClass('active');
                  $(items[i-1]).addClass('active');
                  // for pane
                  $(pane[i]).removeClass('show active');
                  $(pane[i-1]).addClass('show active');
              }
          });
  }
  bootstrapTabControl();
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;head&gt;
          &lt;script src="https://kit.fontawesome.com/69362e78c5.js" crossorigin="anonymous"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
          &lt;?php require_once __DIR__ . '/header.phtml'; ?&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
                  &lt;ul class="nav nav-tabs"&gt;   &lt;!--Using a list to create the tabs --&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a href="#contact-tab" class="nav-link active" data-bs-toggle="tab"&gt;Contact Details&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a href="#questions-tab" class="nav-link" data-bs-toggle="tab"&gt;Questions&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a href="#delivery-tab" class="nav-link" data-bs-toggle="tab"&gt;Delivery Info&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  &lt;!-------------------------------------------------------------------------------------------------------------------------------------------------  --&gt;
                  &lt;form class="row g-3" action="&lt;?= $data['action'] ?&gt;" method="post"&gt;
                      &lt;div class="tab-content"&gt;       &lt;!-- This involves the tav content --&gt;
                          &lt;div class="tab-pane fade show active" id="contact-tab"&gt;
  
                              &lt;div class="row"&gt;       &lt;!-- start row here --&gt;
                                  &lt;h1&gt;Contact &amp; Site Details&lt;/h1&gt;
                                  &lt;div class="col-md-7"&gt;
                                      &lt;label for="site_name" class="form-label"&gt;Site Name*&lt;/label&gt;
                                      &lt;input type="text"
                                          class="form-control"
                                          id="site_name"
                                          name="site_name"
                                          value="&lt;?= $data['record']['site_name'] ?? '' ?&gt;"
                                          placeholder="Enter Site Name"
                                          required&gt;&lt;br&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;button class="nexttab"&gt;Next&lt;/button&gt;
                          &lt;/div&gt;
  
                          &lt;div class="tab-pane fade" id="questions-tab"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-12"&gt;
                                      &lt;h6 for="current_machine"&gt;1. What is your Current Machine?&lt;/h6&gt;
                                          &lt;input type="text"
                                              class="form-control"
                                              id="current_machine"
                                              name="current_machine"
                                              value="&lt;?= $data['record']['current_machine'] ?? '' ?&gt;"
                                              placeholder="Leave blank if none"&gt;&lt;br&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="tab-pane fade" id="delivery-tab"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-12"&gt;
                                      &lt;h6 for="q7"&gt;9. What floor is the Machine(s) going to be located on?&lt;/h6&gt;
                                          &lt;input type="text"
                                              class="form-control"
                                              id="q7"
                                              name="q7"
                                              value="&lt;?= $data['record']['q7'] ?? '' ?&gt;"
                                              placeholder="Please enter what floor your machine will be located on"&gt; &lt;br&gt;&lt;br&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                          
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>