Tengo el siguiente Wizard desarrollado nativamente usando jQuery aquí no se ejecuta correctamente, pueden observar la [demostración](http://leodan.co/blog/) en mi alojamiento.

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

      var step = 1;
      var radio = 1;

      
      function animacion(caso){
    		if (!caso) {
    			$(".progressbar").attr("data-active", "");
    		} else {
    			$(".progressbar").attr("data-active", caso);
    		}

    		var items = $(".progressbar li");
    		for (var i = 0; i < items.length; i++) {
    			var item = items[i];
    			if (!caso) {
    				$(item).removeClass("active");
    			} else if (i < caso) {
    				$(item).addClass("active");
    			} else {
    				$(item).removeClass("active");
    			}
    		}
    	};

    	function show_step(step){
    		var data = $( "#form" ).serialize();
    		var url = 'saveTemp.php?step=' + step;

    		$.ajax({
    			type: "POST",
    			url: url,
    			data: data
    		}).done(function(resp){
    			step = parseInt(step);
    			if (step === 3) {
    				var radio = parseInt(resp.radio);
    				switch(radio) {
    					case 1:
    						urlform = 'php/pay1.php'
    					break;
    					case 2:
    						urlform = 'php/pay2.php'
    					break;
    					case 3:
    						urlform = 'php/pay3.php'
    					break;
    					default:
    						urlform = 'php/pay1.php'
    					break;
    				}

    				$('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
    					if(statusTxt === "success") {
    						$('.step').css( "display", "none" );
    						$('#step'+ step).fadeIn("slow");
    						animacion(step);
    					}

    					if(statusTxt === "error") {
    						//
    					}
    				});
    			} else {
    				$('.step').css( "display", "none" );
    				$('#step'+ step).fadeIn("slow");
    				animacion(step);
    			}
    		});
    	};

    	$(function() {
    		show_step(step);
    	});

<!-- language: lang-css -->


    .wrp-wizard {
      width: 100%;
      padding-top: 175px;
    }

    .progressbar {
      position: relative;
      padding: 0;
      margin: 0;
    }

    .progressbar li {
      list-style-type: none;
      float: left;
      /*width: 33.33%;*/
      width: 19.33%;
      position: relative;
      text-align: center;
    }

    .progressbar li > * {
      border: 1px dotted rgba(0, 0, 0, 0.18823529411764706);
      position: relative;
      padding: 5px 10px 5px 10px;
      display: inline-block;
      font-size: .9rem;
      color: rgba(44, 63, 76, 0.6196078431372549);
      top: -70px;
      background-color: rgba(237, 239, 240, 0.61);
    }

    .progressbar li:before {
      content: '';
      width: 12px;
      height: 12px;
      display: block;
      text-align:  center;
      margin: 0 auto;
      border-radius: 50%;
      background-color: #edeff0;
    }
      
    .progressbar li:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 4px;
      background-color: #edeff0;
      top: 4px;
      left: -50%;
      z-index: -1;
    }
      
    .progressbar li:first-child:after {
      content: none;
    }
      
    .progressbar li.active span {
      color: green;
      background-color: rgba(0, 128, 0, 0.1);
    }

    .progressbar li.active:before {
    	background-color: green;
    	-webkit-transition: background 300ms ease;
    	transition: background 300ms ease;
    	-webkit-transition-delay: 300ms;
    	transition-delay: 300ms;
    }

    /*.progressbar li.active + li:after {
      background-color: green;
      width: 50%;
    }*/

    .progressbar li.active + li:after {
       background: linear-gradient(to right, green 0%,green 50%,#edeff0 50%,#edeff0 100%)
    }

    .progressbar:after {
      content: "";
      height: 4px;
      left: 16.666%;
      background: green;
      top: 4px;
      position: absolute;
      -webkit-transition: width 300ms ease;
      transition: width 300ms ease;
    }

    .progressbar[data-active="1"]:after {
      width: 0;
    }

    .progressbar[data-active="2"]:after {
      width: 20%; /*33%*/
    }

    .progressbar[data-active="3"]:after {
      width: 40%;
    }

    .progressbar[data-active="4"]:after {
      width: 51%;
    }

    .progressbar:before {
      content: url(assets/img/website/system/cart-icon.png);
      margin-top: -20px;
      margin-left: -88px; /*-11*/
      left: 16.666%;
      top: 4px;
      position: absolute;
      -webkit-transition: left 300ms ease;
      transition: left 300ms ease;
    }

    .progressbar:not([data-active=""]):before {
      opacity: 1;
      -webkit-transition: left 2900ms ease, opacity 300ms ease;
      transition: left 2900ms ease, opacity 300ms ease;
    }

    .progressbar[data-active="1"]:before {
      left: 22.666%;
    }

    .progressbar[data-active="2"]:before {
      left: 40%; /*left: 50%;*/
    }

    .progressbar[data-active="3"]:before {
      left: 60.333%;
    }

    .progressbar[data-active="4"]:before {
      left: 73.333%;
    }

    .progressbar[data-active=""]:before {
      opacity: 0;
    }

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="basket">
    		<div class="normal-screen">
    			<div class="container">
    				<div class="wrp-wizard">
    					<ul class="progressbar" data-active="">
    						<li class="active"><span>CARRO DE LA COMPRA</span></li>
    						<li><span>REVISIÓN & METODO DE PAGO</span></li>
    						<li><span>PROCESAR PAGO</span></li>
    					</ul>
    					<div class="cartanime"></div>
    				</div>
    			</div>
    			<div class="container">
    				<div id="step1" class="step">
    					<h1>Carrito</h1>
    					<a class="basket-checkout back111" data-ref="#" onclick="show_step(2)">Continuar</a>
    				</div>
    				<div id="step2" class="step">
    					<div class="content-payment">
    						<div class="slect-pay">
    							<h2>Método de pago</h2>
    							<div class="group-radio">
    																<input name="radio" type="radio" id="1" value="1" checked="checked" >
    								<label for="1" title="Transferencia Bancaria">Transferencia Bancaria</label>
    																<input name="radio" type="radio" id="2" value="2"  >
    								<label for="2" title="PayPal">PayPal</label>
    																<input name="radio" type="radio" id="3" value="3"  >
    								<label for="3" title="Tarjeta de credito">Tarjeta de credito</label>
    															</div>
    						</div>
    					</div>

    					<a class="basket-checkout back111" data-ref="#" onclick="show_step(1)">Atras</a>
    					<a data-ref="#" onclick="show_step(3); $('[name=formTpv]').submit();"> Procesar Pago</a>
    				</div>
    				<div id="step3" class="step">
    					<div class="info-pay">
    						<h2>Procesar pago</h2>
    						<a data-ref="#" onclick="show_step(1)">Editar metodo de pago</a>
    						<div class="themes-payment">
    							<div id="divPago"></div>
    						</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>

<!-- end snippet -->

Estoy usando sesiones de PHP, para mostrarle al usuario el paso donde quedo y no comenzar desde el inicio, para ello tengo tres archivos php:

saveTemp.php

    <?php
    	session_start();
    	$step =  isset($_GET['step']) ?  $_GET['step'] : 1;
    	$_SESSION['datos_form'] = $_POST;
    
    	include 'php/libs/validate.php';
    
    	header('Content-Type: application/json');
    
    	$json =  array(
    		'radio'     => $radio,
    		'step'      => $step
    	);
    
    	echo json_encode($json);
    ?>

wizard.php

    <?php
    	//session_start();
    	if (isset($_GET['p'])) {
    		session_destroy();
    		session_start();
    	}
    
    	include  'validate.php';
    
    	$r =array(
    		1 => 'Transferencia Bancaria',
    		2 => 'PayPal',
    		3 => 'Tarjeta de credito',
    	);
    ?>

validate.php

    <?php
    	$datosForm = (isset($_SESSION['datos_form']) && is_array($_SESSION['datos_form'])) ? $_SESSION['datos_form'] :array();
    	$sPaso = isset($datosForm['__step__']) ? $datosForm['__step__'] : 1;
    	$step = isset($step) ? $step : $sPaso;
    	$radio   = isset($datosForm['radio']) ? $datosForm['radio'] : 1;
    	$_SESSION['datos_form']['__step__'] = $step;
    ?>

Ya los pasos guardados los recupero de la siguiente forma:

	<script type="text/javascript">
		var step = <?php echo $step ?>;
		var radio = <?php echo $radio ?>;
	</script>

La variable `var step` guarda el paso actual en el que quedo el usuario y, la variable `var radio` guarda el método de pago seleccionado.

El problema esta en que al finalizar la compra el ultimo paso y el método de pago seleccionado queda guardado y, si el usuario que ya realizo una compra se anima hacerlo nuevamente con otro producto y al acceder al diseño del wizard este le enviara al último paso de procesar el pago sin permitirle al usuario agregar un cupón de descuento o utilizar otro método de pago para hacerlo debe regresar para atrás.

Entonces como puedo reiniciar los valores del wizard al inicio al finalizar la compra o el ultimo paso.

Otro defecto que puede ser confuso es tener que darle a saber a los enlaces manualmente el paso que debe seguir, usando `onclick="show_step(1)` sería más fácil usar un id `Next` y `Back` para que sea más sencillo.