Tab system that needs to add/remove tabs. Need help to update the index when adding new tabs?

Question

I've been working on this for sometime but can't find a solution that works. Any help is hugely appreciated!

Working: You're able to click next to go to each tab, by default only 5 are shown.

Not working: If you click next until you get to services and then choose "full head of highlights" 2 more tabs are added in (with "detach()") - when next is clicked it adds 2 tabs and updates the number 4/7, but the index doesn't update and I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

I think this error relates to the index being incorrect - basically I need to add something to update the index if a colour is checked. I've tried to do this in many different ways but it's not working.

Dev website: #

Webflow || [];
Webflow.push(function () {
    // For any tab-prev and tab-next clicks
    $(".booking_component").on("click", ".tab-prev, .tab-next", function () {
        // Get direction
        var direction = $(this).hasClass("tab-prev") ? -1 : 1;
        // Get the tab links
        var tablinks = $(this).parent().find(".w-tab-menu");
        // Get index of current tab link, add direction
        var index = tablinks.find(".w--current").index() + direction;

        // If array out of bounds, click on the first
        index = index >= tablinks.children().length ? 0 : index;
        console.log("step index = " + index);

        var bookingStep = $("#stepNumber");
        var tabNumber = index + 1 + "/" + tablinks.children().length;

        if (index === 0) {
            bookingStep.text(tabNumber);
            $(".booking-nav-btn.prev").css("visibility", "hidden");
        }
        if (index === 1) {
            bookingStep.text(tabNumber);
            $(".booking-nav-btn.prev").css("visibility", "visible");
            $(".booking-nav-btn.prev").removeClass("hidden");
        }
        if (index === 2) {
            bookingStep.text(tabNumber);
        }
        if (index === 3) {
            bookingStep.text(tabNumber);
            if (colorOption == true) {
                //updateIndex;
            }
        }
        if (index === 4) {
            bookingStep.text(tabNumber);
            if (colorOption == true) {
                //updateIndex;
            }
        }
        if (index === 5) {
            bookingStep.text(tabNumber);
        }
        if (index === 6) {
            bookingStep.text(tabNumber);
        }
        // Update tabs by triggering a "tap" event on the corresponding slide button
        // if ($("[name='Colour']").is(":checked")) {
        //  // Check colour options
        //  index = 2;
        // }
        tablinks.find(".w-tab-link").eq(index).trigger("click");
    });
    // End click handler
});

});

Answer 1

This is a generic version of what you are looking for, I believe it has all the functionality you want and is fully commented. You should be able to re-purpose this code as you need. I've made it a little more generic so that you can keep adding new tabs and it will continue to function.

It has a custom function to check the active tab and the total number of tabs before updating the footer. This will also hide the navigation buttons if you are on the first or last tab.

The next and previous buttons share a common function which identifies whether it should move forward or backward based on the id of the clicked button. The function is linked to the common class .tab-navigation-button.

A button which adds a generic tab is included for demo purposes, automatically adding a unique id and content based on the current number of tabs.

---

// Add event to next button
$(".tab-navigation-button").click(function() {

  // Find current active tab
  current = $(".tab.active");

  // Check if you clicked next or previous
  if ($(this).attr("id") == "tab-next") {

    // Activate next tab
    $(".tab.active").next(".tab").addClass("active");

  } else {

    // Active pevious tab
    $(".tab.active").prev(".tab").addClass("active");

  }

  // Check if more than one tab is activated
  if ($(".tab.active").length > 1) {

    // Remove original active tab
    current.removeClass("active");

    // Update footer
    updateTabFooter();

  }


});



// Add new tab button is clicked
$("#tab-new").click(function() {

  // Get total number of tabs
  total = $("#tab-wrapper").children(".tab").length + 1;

  // Add new tab
  $("#tab-wrapper").append("<div id='tab-" + total + "' class='tab'>Tab " + total + "</div>");

  // Update footer
  updateTabFooter();


});



// Update footer 
function updateTabFooter() {

  // Get total number of tabs
  total = $("#tab-wrapper").children(".tab").length;

  // Get current active tab
  var tab = $('.tab'),
    current = tab.filter('.active'),
    index = current.index('.tab');

  // Update text
  $("#total-tabs").text(total);
  $("#current-tab").text(index + 1);

  // Show navigation buttons
  $("#tab-next").show();
  $("#tab-previous").show();

  // Hide navigation buttons as needed
  if (total == index + 1) {
    $("#tab-next").hide();
  } else if (index == 0) {
    $("#tab-previous").hide();
  }

}



// Update footer at the start
updateTabFooter();

.tab {
  display: none;
}

.tab.active {
  display: inherit;
}

#tab-footer {
  padding: 12px 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tab-wrapper">
  <div id="tab-1" class="tab active">
    Tab 1
  </div>
  <div id="tab-2" class="tab">
    Tab 2
  </div>
  <div id="tab-3" class="tab">
    Tab 3
  </div>
  <div id="tab-4" class="tab">
    Tab 4
  </div>
  <div id="tab-6" class="tab">
    Tab 5
  </div>
</div>
<div id="tab-footer">
  <button id="tab-previous" class="tab-navigation-button">Prev</button>
  <span id="current-tab">N/A</span>/
  <span id="total-tabs">N/A</span>
  <button id="tab-next" class="tab-navigation-button">Next</button>
</div>
<button id="tab-new">New Tab</button>