How to create wizard using Jquery in MVC application?

Question

I have created wizard which is not working as expected. it always shows 1st and 2nd wizard step. But I want only one wizard and then when click on Next, 2nd wizard should display and same way for 3rd. At last, I want to implement previous and submit.

Script

$(function ()
{

    $(".wizard-step:first").fadeIn();   
    $("#back-step").hide().click(function ()
    {
        var $step = $(".wizard-step:visible"); 
        if ($step.prev().hasClass("wizard-step")) { 
            $step.hide().prev().fadeIn();                 
            if (!$step.prev().prev().hasClass("wizard-step")) {
                $("#back-step").hide();
            }
        }
    });
    $("#next-step").click(function ()
    {
        var $step = $(".wizard-step:visible"); 
        var validator = $("form").validate(); 
        var anyError = false;
        $step.find("input").each(function ()
        {
            if (!validator.element(this)) { 
                anyError = true;
            }

        });

        if (anyError)
            return false; 

        if ($step.next().hasClass("confirm")) { 
            $.post("/wizard/confirm", $("form").serialize(), function (r)
            {
                $(".wizard-step.confirm").html(r);
            });
        }

        if ($step.next().hasClass("wizard-step")) { 
            $step.hide().next().fadeIn();  
            $("#back-step").show();  
        }
        else { 
            $("form").submit();
        }
    });
});

View

 <div class="Wizard-step">
        <div class="panel panel-default">
            <h4>BASIC INFO</h4>
            <div class="panel-body">
                <div class="form-group has-success ">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="input-group">
                            @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                            <span class="input-group-addon"><i class="glyphicon glyphicon-ok"></i></span>
                        </div>
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.EmailId, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.EmailId, new { htmlAttributes = new { @class = "form-control" } })
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                        @Html.ValidationMessageFor(model => model.EmailId, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.DOB, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.DOB, new { htmlAttributes = new { @class = "form-control" } })
                            <i class="glyphicon glyphicon-calendar"></i>
                        </div>

                        @Html.ValidationMessageFor(model => model.DOB, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">

                    <div class="CoursesStudiedYesNo" style="padding-left:6em;">
                        @Html.Label("Have you studied before?")
                        <br />
                        @Html.RadioButtonFor(m => m.StudiedYesNo, "Yes")<span id="SpacebetweenRadioandText">Yes</span><br />
                        @Html.RadioButtonFor(m => m.StudiedYesNo, "No", new { @checked = "checked" })<span id="SpacebetweenRadioandText">No</span>
                    </div>

                </div>
                <div class="form-group ">

                    <div class="CoursesDropdown" style="padding-left:6em;">
                        @Html.LabelFor(model => model.CoursesStudied, htmlAttributes: new { @class = "control-label " })
                        <br />
                        @Html.DropDownListFor(m => m.CoursesStudied, Model.CoursesStudiedList, "Choose the course you have studied here", new { @class = "form-control" })

                        @Html.ValidationMessageFor(model => model.CoursesStudied, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="wizard-step" style="display:none">
        <div class="panel panel-default">
            <h4>CONTACT DETAILS</h4>
            <div class="panel-body">
                <div class="form-group">
                    @Html.Label("Phone", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control" } })
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>

                        @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.Label("Mobile", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.mobileNumber, new { htmlAttributes = new { @class = "form-control" } })
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>

                        @Html.ValidationMessageFor(model => model.mobileNumber, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.Label("Address", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.Street, new { htmlAttributes = new { @class = "form-control", placeholder = "Street" } })<br />
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.Suburb, new { htmlAttributes = new { @class = "form-control", placeholder = "Sub" } })<br />
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control", placeholder = "City" } })<br />
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.Region, new { htmlAttributes = new { @class = "form-control", placeholder = "Region" } })<br />
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                        <div class="inner-addon right-addon">
                            @Html.EditorFor(model => model.Country, new { htmlAttributes = new { @class = "form-control", placeholder = "Country" } })<br />
                            <i class="glyphicon glyphicon-ok"></i>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="wizard-step" style="display:none">
        <div class="panel panel-default">
            <h4>SELECT A COURSE</h4>
            <div class="panel-body">
                <div class="form-group">
                    @Html.Label("Course", htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.DropDownListFor(m => m.CourseName, Model.CourseNameList, "Choose a course", new { @class = "form-control" })
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="wizard-step" style="display:none">
        <div class="panel panel-default">
            <h4>SUMMARY</h4>
            <div class="panel-body">
                <div>
                    <dl class="dl-horizontal">
                        <dt>
                            @Html.DisplayNameFor(model => model.Name)
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.Name)
                        </dd>

                        <dt>
                            @Html.DisplayNameFor(model => model.EmailId)
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.EmailId)
                        </dd>

                        <dt>
                            @Html.DisplayNameFor(model => model.DOB)
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.DOB)
                        </dd>

                        <dt>
                            @Html.DisplayName("Study History")
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.CoursesStudied)
                        </dd>

                        <dt>
                            @Html.DisplayNameFor(model => model.PhoneNumber)
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.PhoneNumber)
                        </dd>

                        <dt>
                            @Html.DisplayNameFor(model => model.mobileNumber)
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.mobileNumber)
                        </dd>

                        <dt>
                            @Html.DisplayName("Address")
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.Street)
                        </dd>

                        <dd>
                            @Html.DisplayFor(model => model.Suburb)
                        </dd>

                        <dd>
                            @Html.DisplayFor(model => model.City)
                        </dd>

                        <dd>
                            @Html.DisplayFor(model => model.Region)
                        </dd>

                        <dd>
                            @Html.DisplayFor(model => model.Country)
                        </dd>

                        <dt>
                            @Html.DisplayName("Selected Course")
                        </dt>

                        <dd>
                            @Html.DisplayFor(model => model.CourseName)
                        </dd>

                    </dl>
                </div>

            </div>
        </div>
    </div>