Edit navigation bar

Hello I am new here and i am new in JQuery. Can anyone help me how can i edit this file to make more steps and do it to work perfectly?

main.js

jQuery(document).ready(function($){
    function ProductBuilder( element ) {
        this.element = element;
        this.stepsWrapper = this.element.children('.cd-builder-steps');
        this.steps = this.element.find('.builder-step');
        //store some specific bulider steps
        this.models = this.element.find('[data-selection="models"]');
        this.summary;
        this.optionsLists = this.element.find('.options-list');
        //bottom summary
        this.fixedSummary = this.element.find('.cd-builder-footer');
        this.modelPreview = this.element.find('.selected-product').find('img');
        this.totPriceWrapper = this.element.find('.tot-price').find('b');
        //builder navigations
        this.mainNavigation = this.element.find('.cd-builder-main-nav');
        this.secondaryNavigation = this.element.find('.cd-builder-secondary-nav');
        //used to check if the builder content has been loaded properly
        this.loaded = true;
       
        // bind builder events
        this.bindEvents();
    }

    ProductBuilder.prototype.bindEvents = function() {
        var self = this;

        //detect click on the left navigation
        this.mainNavigation.on('click', 'li:not(.active)', function(event){
            event.preventDefault();
            self.loaded && self.newContentSelected($(this).index());
        });

        //detect click on bottom fixed navigation
        this.secondaryNavigation.on('click', '.nav-item li:not(.buy)', function(event){
            event.preventDefault();
            var stepNumber = ( $(this).parents('.next').length > 0 ) ? $(this).index() + 1 : $(this).index() - 1;
            self.loaded && self.newContentSelected(stepNumber);
        });
        //detect click on one element in an options list (e.g, models, accessories)
        this.optionsLists.on('click', '.js-option', function(event){
            self.updateListOptions($(this));
        });
        //detect clicks on customizer controls (e.g., colors ...)
        this.stepsWrapper.on('click', '.cd-product-customizer a', function(event){
            event.preventDefault();
            self.customizeModel($(this));
        });
    };

    ProductBuilder.prototype.newContentSelected = function(nextStep) {
        //first - check if a model has been selected - user can navigate through the builder
        if( this.fixedSummary.hasClass('disabled') ) {
            //no model has been selected - show alert
            this.fixedSummary.addClass('show-alert');
        } else
            {
            //model has been selected so show new content
            //first check if the color step has been completed - in this case update the product bottom preview
            if( this.steps.filter('.active').is('[data-selection="colors"]') ) {
                //in this case, color has been changed - update the preview image
                var imageSelected = this.steps.filter('.active').find('.cd-product-previews').children('.selected').children('img').attr('src');
                this.modelPreview.attr('src', imageSelected);
            }
            //if Summary is the selected step (new step to be revealed) -> update summary content
            if( nextStep + 1 >= this.steps.length ) {
                this.createSummary();
            }
           
            this.showNewContent(nextStep);
            this.updatePrimaryNav(nextStep);
            this.updateSecondaryNav(nextStep);
        }
    }

    ProductBuilder.prototype.showNewContent = function(nextStep) {
        var actualStep = this.steps.filter('.active').index() + 1;
        if( actualStep < nextStep + 1 ) {
            //go to next section
            this.steps.eq(actualStep-1).removeClass('active back').addClass('move-left');
            this.steps.eq(nextStep).addClass('active').removeClass('move-left back');
        } else {
            //go to previous section
            this.steps.eq(actualStep-1).removeClass('active back move-left');
            this.steps.eq(nextStep).addClass('active back').removeClass('move-left');
        }
    }

    ProductBuilder.prototype.updatePrimaryNav = function(nextStep) {
        this.mainNavigation.find('li').eq(nextStep).addClass('active').siblings('.active').removeClass('active');
    }

    ProductBuilder.prototype.updateSecondaryNav = function(nextStep) {
        ( nextStep == 0 ) ? this.fixedSummary.addClass('step-1') : this.fixedSummary.removeClass('step-1');

        this.secondaryNavigation.find('.nav-item.next').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
        this.secondaryNavigation.find('.nav-item.prev').find('li').eq(nextStep).addClass('visible').removeClass('visited').prevAll().removeClass('visited').addClass('visited').end().nextAll().removeClass('visible visited');
    }

    ProductBuilder.prototype.createSummary = function() {
        var self = this;
        this.steps.each(function(){
            //this function may need to be updated according to your builder steps and summary
            var step = $(this);
            if( $(this).data('selection') == 'colors' ) {
                //create the Color summary
                var colorSelected = $(this).find('.cd-product-customizer').find('.selected'),
                    color = colorSelected.children('a').data('color'),
                    colorName = colorSelected.data('content'),
                    imageSelected = $(this).find('.cd-product-previews').find('.selected img').attr('src');
               
                self.summary.find('.summary-color').find('.color-label').text(colorName).siblings('.color-swatch').attr('data-color', color);
                self.summary.find('.product-preview').attr('src', imageSelected);
            } else if( $(this).data('selection') == 'accessoies' ) {
                var selectedOptions = $(this).find('.js-option.selected'),
                    optionsContent = '';

                if( selectedOptions.length == 0 ) {
                    optionsContent = '<li><p>No Accessories selected;</p></li>';
                } else {
                    selectedOptions.each(function(){
                        optionsContent +='<li><p>'+$(this).find('p').text()+'</p></li>';
                    });
                }

                self.summary.find('.summary-accessories').children('li').remove().end().append($(optionsContent));
            }
        });
    }

    ProductBuilder.prototype.updateListOptions = function(listItem) {
        var self = this;
       
        if( listItem.hasClass('js-radio') ) {
            //this means only one option can be selected (e.g., models) - so check if there's another option selected and deselect it
            var alreadySelectedOption = listItem.siblings('.selected'),
                price = (alreadySelectedOption.length > 0 ) ? -Number(alreadySelectedOption.data('price')) : 0;

            //if the option was already selected and you are deselecting it - price is the price of the option just clicked
            ( listItem.hasClass('selected') )
                ? price = -Number(listItem.data('price'))
                : price = Number(listItem.data('price')) + price;

            //now deselect all the other options
            alreadySelectedOption.removeClass('selected');
            //toggle the option just selected
            listItem.toggleClass('selected');
            //update totalPrice - only if the step is not the Models step
            (listItem.parents('[data-selection="models"]').length == 0) && self.updatePrice(price);
        } else {
            //more than one options can be selected - just need to add/remove the one just clicked
            var price = ( listItem.hasClass('selected') ) ? -Number(listItem.data('price')) : Number(listItem.data('price'));
            //toggle the option just selected
            listItem.toggleClass('selected');
            //update totalPrice
            self.updatePrice(price);
        }
       
        if( listItem.parents('[data-selection="models"]').length > 0 ) {
            //since a model has been selected/deselected, you need to update the builder content
            self.updateModelContent(listItem);
        }
    };

    ProductBuilder.prototype.updateModelContent = function(model) {
        var self = this;
        if( model.hasClass('selected') ) {
            var modelType = model.data('model'),
                modelImage = model.find('img').attr('src');

            //need to update the product image in the bottom fixed navigation
            this.modelPreview.attr('src', modelImage);

            //need to update the content of the builder according to the selected product
            //first - remove the contet which refers to a different model
            this.models.siblings('li').remove();
            //second - load the new content
            $.ajax({
                type       : "GET",
                dataType   : "html",
                url        : modelType+".html",
                beforeSend : function(){
                    self.loaded = false;
                    model.siblings().removeClass('loaded');
                },
                success    : function(data){
                    self.models.after(data);
                    self.loaded = true;
                    model.addClass('loaded');
                    //activate top and bottom navigations
                    self.fixedSummary.add(self.mainNavigation).removeClass('disabled show-alert');
                    //update properties of the object
                    self.steps = self.element.find('.builder-step');
                    self.summary = self.element.find('[data-selection="summary"]');
                    //detect click on one element in an options list
                    self.optionsLists.off('click', '.js-option');
                    self.optionsLists = self.element.find('.options-list');
                    self.optionsLists.on('click', '.js-option', function(event){
                        self.updateListOptions($(this));
                    });

                    //this is used not to load the animation the first time new content is loaded
                    self.element.find('.first-load').removeClass('first-load');
                },
                error     : function(jqXHR, textStatus, errorThrown) {
                    //you may want to show an error message here
                }
            });

            //update price (no adding/removing)
            this.totPriceWrapper.text(model.data('price'));
        } else {
            //no model has been selected
            this.fixedSummary.add(this.mainNavigation).addClass('disabled');
            //update price
            this.totPriceWrapper.text('0');

            this.models.find('.loaded').removeClass('loaded');
        }
    };

    ProductBuilder.prototype.customizeModel = function(target) {
        var parent = target.parent('li')
            index = parent.index();
       
        //update final price
        var price = ( parent.hasClass('selected') )
            ? 0
            : Number(parent.data('price')) - parent.siblings('.selected').data('price');

        this.updatePrice(price);
        target.parent('li').addClass('selected').siblings().removeClass('selected').parents('.cd-product-customizer').siblings('.cd-product-previews').children('.selected').removeClass('selected').end().children('li').eq(index).addClass('selected');
    };

    ProductBuilder.prototype.updatePrice = function(price) {
        var actualPrice = Number(this.totPriceWrapper.text()) + price;
        this.totPriceWrapper.text(actualPrice);
    };

    if( $('.cd-product-builder').length > 0 ) {
        $('.cd-product-builder').each(function(){
            //create a productBuilder object for each .cd-product-builder
            new ProductBuilder($(this));
        });
    }
});

Code (JavaScript):