JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

JavaScript

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');
        this.models = this.element.find('[data-selection="models"]');
        this.summary;
        this.optionsLists = this.element.find('.options-list');
        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');
        this.mainNavigation = this.element.find('.cd-builder-main-nav');
        this.secondaryNavigation = this.element.find('.cd-builder-secondary-nav');
        this.loaded = true;
        this.bindEvents();
    }
    ProductBuilder.prototype.bindEvents = function() {
        var self = this;
        this.mainNavigation.on('click', 'li:not(.active)', function(event) {
            event.preventDefault();
            self.loaded && self.newContentSelected($(this).index());
        });
        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);
        });
        this.optionsLists.on('click', '.js-option', function(event) {
            self.updateListOptions($(this));
        });
        this.stepsWrapper.on('click', '.cd-product-customizer a', function(event) {
            event.preventDefault();
            self.customizeModel($(this));
        });
    };
    ProductBuilder.prototype.newContentSelected = function(nextStep) {
        if (this.fixedSummary.hasClass('disabled')) {
            this.fixedSummary.addClass('show-alert');
        } else {
            if...