Step Wizard Widget

$.fn.wizard = function(opts = {}) {
  return this.each(function() {
    const $w = $(this);
    const $steps = $w.find(".wiz-step");
    let cur = opts.start || 0;
    function render() {
      $steps.hide().eq(cur).show();
      $w.find(".wiz-progress").css("width", ((cur+1)/$steps.length*100)+"%");
      $w.trigger("wizard:step", [cur, $steps.length]);
    }
    $w.on("click",".wiz-next",() => { if (cur < $steps.length-1) { cur++; render(); } });
    $w.on("click",".wiz-prev",() => { if (cur > 0) { cur--; render(); } });
    $w.data("wizard", { goTo: n => { cur=n; render(); } });
    render();
  });
};
$("#onboarding").wizard({ start: 0 });