Continue and previous buttons not navigating Javascript bootstrap

Question

Below is a piece of code I've been trying to get to work. The Continue and previous buttons not working,The javascript is not showing the next and previous tabs.

Javascript:

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">

    $('.prev').click(function () {
        ;
        var prevId = $(this).parents('.tab-pane').prev().attr("id");    
        $('[href=#' + prevId + ']').tab('show');

        return false;

    });


    $('.next').click(function () {

        var nextId = $(this).parents('.tab-pane').next().attr("id");

        $('[href=#' + nextId + ']').tab('show');

        return false;

    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

        //update progress
        var step = $(e.target).data('step');
        var percent = (parseInt(step) / 6) * 100;

        $('.progress-bar').css({ width: percent + '%' });
        $('.progress-bar').text("Step " + step + " of 6");

        //e.relatedTarget // previous tab

    })

    $('.first').click(function () {

        $('#myWizard a:first').tab('show');

    })
</script>

Html:

<div class="navbar">
    <div class="navbar-inner">
        <ul id="tabs1" class="nav nav-pills">
           <li class="active"><a href="#step1" data-toggle="tab" data-step="1">Basic Details</a></li>
           <li><a href="#step2" data-toggle="tab" data-step="2">Data Source</a></li>
           <li><a href="#step3" data-toggle="tab" data-step="3">Feature Generation</a></li>
           <li><a href="#step4" data-toggle="tab" data-step="4">Aggregation over Time</a></li>
           <li><a href="#step5" data-toggle="tab" data-step="5">Analysis</a></li>
           <li><a href="#step6" data-toggle="tab" data-step="6">Output</a></li>
        </ul>
    </div>

the full code comes from:https://www.codeply.com/go/RMKW5H5u2e

Answer 1

You're missing quotes in $('[href=#' + nextId + ']') and $('[href=#' + prevId + ']')

Should be:

$('[href="#' + nextId + '"]').tab('show');
//and
$('[href="#' + prevId + '"]').tab('show');