JSFiddle - React, Tailwind, and code Playground

by Tom DeBerardine

HTML

Inspect me:
<div class="wizard-step"></div>
<div class="wizard-step"></div>
<div class="wizard-step"></div>
<div class="wizard-step"></div>

JavaScript

$('.wizard-step').each(function(k,v) {
    var classToAdd = 'tab-pane fade';
    // if there are no active wizards, make the first active
    if (!$('.wizard-step.active').length && k === 0) {
        $(v).addClass('active');
    }
    $(v).prop('id', 'wizard-step-' + (k+1)).addClass(classToAdd).attr('data-step', (k+1));    
});