Adding functionality to continue and back buttons using script

Functionality of the working of continue and back button can be given using script.

Create Continue and Back buttons in template file and assign an attribute.

Then in extension give the functionality to the buttons as per the requirements, here in the screenshot the functionality is given to hide or show a container.

_.extend(WizardView.prototype,
{
    initialize: _.wrap(WizardView.prototype.initialize, function initialize(fn) {
	fn.apply(this, _.toArray(arguments).slice(1));

        var url = new URL(window.location.href);
        var step = url.searchParams.get('step');

	if(step==0)
	{				
          this.wizard.selectedShipping = true;
          this.wizard.selectedDelivery = false;	
          this.wizard.selectedPayment = false;
          this.wizard.selectedBilling = false;
	}
	if(step==1)
	{
          //this.wizard.selectedShipping = true;
         this.wizard.selectedDelivery = true;	
         this.wizard.selectedPayment = false;
         this.wizard.selectedBilling = false;
	}
	if(step==2)
	{
         //this.wizard.selectedShipping = true;	
         this.wizard.selectedDelivery = true;	
         this.wizard.selectedPayment = true;	
         this.wizard.selectedBilling = false;
	}
	if(step==3)
	{		
          //this.wizard.selectedShipping = true; 
          this.wizard.selectedDelivery = true;	
          this.wizard.selectedPayment = true;	
          this.wizard.selectedBilling = true;		}
	}),
	events: _.extend(WizardView.prototype.events, {
		'click #shipping_address_continue_button' : 'showDelivary',
		'click #billing_address_back_button' : 'showPayment',
		'click #delivery_method_continue_button' : 'showPayment',
		'click #delivery_method_back_button' : 'showShipping',
		'click #payment_method_continue_button' : 'showBilling',
		'click #payment_method_back_button' : 'showDelivary',
	}),
	showDelivary: function showDelivary(event) {
		console.log('this', this);
		this.wizard.selectedShipping = true;
		this.wizard.selectedBilling = true;
		// Shopping Address continue
		var checkOutStep = event.target.getAttribute('step')
		document.cookie = "step=" + checkOutStep+';path=/';
		var url = new URL(window.location.href);
		url.searchParams.set('step', checkOutStep);
		window.history.replaceState(null, null, url);

		if (checkOutStep==1) {
		console.log('ShipContinue', checkOutStep)
		this.wizard.selectedShipping = true;
		this.wizard.selectedDelivery = true;
		this.wizard.selectedPayment = false;
		this.wizard.selectedBilling = false;
		this.render();
		}
		console.log('event', checkOutStep)
	},
	showPayment: function showPayment(event) {
		//Billing Address Back Button
		var checkOutStep = event.target.getAttribute('step')
		document.cookie = "step=" + checkOutStep+';path=/';
		var url = new URL(window.location.href);
		url.searchParams.set('step', checkOutStep);
		window.history.replaceState(null, null, url);

		if (checkOutStep=2) {
		console.log('BillingBack', checkOutStep)
                 this.wizard.selectedShipping = true;
	         this.wizard.selectedDelivery = true;
		 this.wizard.selectedPayment = true;
	         this.wizard.selectedBilling = false;
                 this.render();
		}
		console.log('event', checkOutStep)
	},
	showShipping: function showShipping(event) {
	// Delivery Back Button
	var checkOutStep = event.target.getAttribute('step')
	var url = new URL(window.location.href);
	url.searchParams.set('step', checkOutStep);
	window.history.replaceState(null, null, url);
	if (checkOutStep==0) {
		console.log('DeliveryBack', checkOutStep)
		this.wizard.selectedShipping = true;
		this.wizard.selectedDelivery = false;
		this.wizard.selectedPayment = false;
		this.wizard.selectedBilling = false;
		this.render();
	}			
		console.log('event', checkOutStep)
	},
	showBilling: function showBilling(event) {
	//var selectedAddress = this.wizard.model.attributes.selectedAddress;
	console.log('Payment_this', this)
	// Payment Method Continue Button
	var checkOutStep = event.target.getAttribute('step')
	document.cookie = "step=" + checkOutStep+';path=/';
	var url = new URL(window.location.href);
	url.searchParams.set('step', checkOutStep);
	window.history.replaceState(null, null, url);
	if (checkOutStep==3) {
		console.log('PaymentContinue', checkOutStep)
		this.wizard.selectedShipping = true;
		this.wizard.selectedDelivery = true;
		this.wizard.selectedPayment = true;
		this.wizard.selectedBilling = true;
		this.render();
	}
		console.log('event', checkOutStep)
	},		
_.extend(OrderWizardModuleAddress.prototype, {
	getContext: _.wrap(OrderWizardModuleAddress.prototype.getContext, function (fn)
	{
	     var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
             original_Ret.ShippingVariable=this.wizard.selectedShipping;
	     original_Ret.BillingVariable=this.wizard.selectedBilling;
             console.log(original_Ret, 'original');
	     return original_Ret;
	})
});
_.extend(OrderWizardModuleShipmethod.prototype, {
	getContext: _.wrap(OrderWizardModuleShipmethod.prototype.getContext, function (fn)
	{
		var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
                original_Ret.DeliveryVariable=this.wizard.selectedDelivery;
		//original_Ret.BillingVariable=this.wizard.selectedBilling;
                console.log(original_Ret, 'original');
		return original_Ret;
	})					
});
_.extend(OrderWizardModulePaymentMethodSelector.prototype, {
     getContext: _.wrap(OrderWizardModulePaymentMethodSelector.prototype.getContext,
     function (fn)
     {
	var original_Ret = fn.apply(this, _.toArray(arguments).slice(1));
        original_Ret.PaymentVariable=this.wizard.selectedPayment;
        //original_Ret.BillingVariable=this.wizard.selectedBilling;
	console.log(original_Ret, 'original');
	return original_Ret;
      })
});

Here the attribute value is taken from the tpl and assigned to a variable through url method and this variable is passed to the tpl again to an if condition to hide or show the container