Twitter bootstrap wizard TypeError: container is undefined

Using twitter bootstrap wizard I'm receiving a 'TypeError: container is undefined' error in the console when clicking the 'next' chevron. The wizard still shows the next tab although the error. What is causing this error?

Firefox 59.0.2 console error:

bootstrap.js:3768:

Fiddle: https://jsfiddle.net/dlo33/8hw5t4j8

<button type="button" class="btn btn-success" data-toggle="modal" data-target="#wizard">Launch</button>

<div id="wizard" class="modal fade" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
      </div>
      <div class="modal-body welcome-modal-body">
        <div id="rootwizard">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="container">
                <ul class="nav nav-pills">
                  <li class="nav-item"><a class="nav-link" href="#tab1" data-toggle="tab">Tab 1</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Tab 2</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Tab 3</a></li>
                  <li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">Tab 4</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div id="bar" class="progress progress-danger progress-striped active">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="1" aria-valuemax="100" style="width: 0%"></div>
          </div>
          <div class="tab-content">
            <div class="tab-pane" id="tab1">
              <h3>Some text in tab 1</h3>
            </div>
            <div class="tab-pane" id="tab2">
              <h3>Some text in tab 2</h3>
            </div>
            <div class="tab-pane" id="tab3">
              <h3>Some text in tab 3</h3>
            </div>
            <div class="tab-pane" id="tab4">
              <h3>Some text in tab 4</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between welcome-modal-footer">
        <button id="button-previous" type="button" class="btn button-previous mr-auto" name='previous' value='Previous'><span class="fa fa-chevron-left"></span></button>
        <button id="button-next" type="button" class="btn button-next ml-auto" name='next' value='Next' data-toggle="tab"><span class="fa fa-chevron-right"></span></button>
        <button id="button-finish" type="submit" class="btn button-finish ml-auto" name='finish' value='Finish'>Finish</button>
      </div>
    </div>
  </div>
</div>

JS

// set up navigation buttons
var next = document.getElementById("wizard").getElementsByClassName("button-next");
var previous = document.getElementById("wizard").getElementsByClassName("button-previous");
var finish = document.getElementById("wizard").getElementsByClassName("button-finish");

// set up bootstrap wizard
$('#rootwizard').bootstrapWizard({
  'nextSelector': next,
  'previousSelector': previous,
  onTabShow: function(tab, navigation, index) {
    var $total = navigation.find('li').length;
    var $current = index + 1;
    var $percent = ($current / $total) * 100;

    if ($percent === 0) {
      $percent = (1 / $total) * 100;
    }
    $('#rootwizard .progress-bar').css({
      width: $percent + '%'
    });

    if ($current <= 1) {
      $(previous).add(finish).css({
        'display': 'none'
      });
      $(next).css({
        'display': 'block'
      });
      $(next).removeClass('disabled');
    } else if ($current < $total) {
      $(previous).add(next).css({
        'display': 'block'
      });
      $(finish).css({
        'display': 'none'
      });
    } else {
      $(next).css({
        'display': 'none'
      });
      $(previous).add(finish).css({
        'display': 'block'
      });
    }
  }
});

$('#rootwizard').bootstrapWizard({
  'tabClass': 'nav nav-pills'
});
$('#welcomeWizard').modal('show');

Fiddle error in chrome 66.0.3359.139:

For what did you added data-toggle="tab" to the next button? Just drop it and the error will gone.

jsfiddle