Fuel UX 2.3 Skeleton

This is a jsFiddle which can be used to demonstrate code with Fuel UX 2.3

HTML

<script src="http://www.fuelcdn.com/fuelux/2.6.0/loader.min.js"></script>
<label for="stepSelector">Choose number of steps here to add</label>
<select id="stepSelector">
    <option value="0">Select me</option>
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="5">5</option>
</select>
<div class="container-fluid">
    <div id="MyWizard" class="wizard">
        <ul class="steps">
            <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1<span class="chevron"></span>

            </li>
            <li data-target="#step2"><span class="badge">2</span>Step 2<span class="chevron"></span>

            </li>
            <li data-target="#step3"><span class="badge">3</span>Step 3<span class="chevron"></span>

            </li>
            <li data-target="#step4"><span class="badge">4</span>Step 4<span class="chevron"></span>

            </li>
            <li data-target="#step5"><span class="badge">5</span>Step 5<span class="chevron"></span>

            </li>
        </ul>
        <div class="actions">
            <button type="button" class="btn btn-mini btn-prev"> <i class="icon-arrow-left"></i>Prev</button>
            <button type="button" class="btn btn-mini btn-next" data-last="Finish">Next<i class="icon-arrow-right"></i>

            </button>
        </div>
    </div>
    <div class="step-content">
        <div class="step-pane active" id="step1">This is step 1</div>
        <div class="step-pane" id="step2">This is step 2</div>
        <div class="step-pane" id="step3">This is step 3</div>
        <div class="step-pane" id="step4">This is step 4</div>
        <div class="step-pane" id="step5">This is step 5</div>
    </div>
</div>

CSS

@import url('//fuelcdn.com/fuelux/2.3/css/fuelux.css');
 @import url('//fuelcdn.com/fuelux/2.3/css/fuelux-responsive.css');
 .container-fluid {
    margin-top: 10px;
}
/*Feel free to add any of your custom CSS here*/

JavaScript

$('#stepSelector').change(function () {
    var numSteps = $('.step-pane').length;
    var newSteps = $(this).val();

    //First off you want to get your current selection for use later.
    var stepNum = $('#MyWizard').wizard('selectedItem').step;

    //Now we need to remove any data-association to the 'wizard' which was already marked up and instantiated from before as otherwise it won't redraw and reinitialize properly.
    $('#MyWizard').data('wizard', '');
    
    //Now add new steps by looping through the correct numbers
    var totalSteps = Number(Number(numSteps) + Number(newSteps));
    for (i = (numSteps + 1); i <= totalSteps; i++) {
        $('.step-content').append('<div class="step-pane" id="step' + i + '">This is step ' + i + '</div>');
        $('.steps').append('<li data-target="#step' + i + '"><span class="badge">' + i + '</span>Step ' + i + '<span class="chevron"></span></li>');
    }

    // Now we reinstantiate the wizard and start off on the previously selected step
    $('#MyWizard').wizard({
        selectedItem: {
            step: stepNum
        }
    });
});