Tabit.js multiple instances on same page with className-CodePudding

Using a tabs library called tabit.js. It initialises fine with ID and one tab but I've got multiple tabs now on one page and finding it difficult to make this work dynanically without fixing an ID for both. Thought about doing it as follows with each:

$('.tabs').each(function () {
  const element = $(this)
  const options = {
    buttonSelector: '[data-target]',
    buttonActiveClass: 'is-active',
    contentSelector: '[data-content]',
    buttonAttribute: 'data-target',
    contentAttribute: 'data-content',
    contentActiveClass: 'is-active',
  }
  if (element) {
    /* eslint-disable no-new */
    new Tabit(element, options)
  }
})

But Tabit implies it does not find a element initialise by outputting:

Uncaught TypeError: new Tabit requires a DOM element as its first argument.

View JSFiddle here: https://jsfiddle.net/e8y0d5um/7/

Any ideas how to make this work? Finding it very difficult to find any solutions of multiple tabs on the same page that don't have a unique ID.

CodePudding user response：

this in the each method refers to the DOM element. There is no need to wrap it in $(). Try this

$('.tabs').each(function () {
  const element = this
  const options = {
    buttonSelector: '[data-target]',
    buttonActiveClass: 'is-active',
    contentSelector: '[data-content]',
    buttonAttribute: 'data-target',
    contentAttribute: 'data-content',
    contentActiveClass: 'is-active',
  }
  if (element) {
    /* eslint-disable no-new */
    new Tabit(element, options)
  }
})