javascript – step form ocultar y mostrar partes del formulario

tengo un problema… Estoy realizando un step form y he visto un tutorial que me llevo a realizar el código que utilizo en mi aplicacion, lo que no estaria funcionando es el ocultar las partes del formulario y el boton de siguiente y atras al clikear. Como podria hacer para que eso ocurra?

stepWizard () {
    

     var navListItems = $('div.setup-panel div a.pasos'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.on("click",function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').on("focus");
        }
    }); 
    var navListItems = $('div.setup-panel div a.pasos'),
    allWells = $('.setup-content'),
    allNextBtn = $('.nextBtn');

    allWells.hide();

    navListItems.on("click",function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
            $('input, select').tooltipster("hide");
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').on("focus");
        }
    });


    var allPrevBtn = $('.prevBtn');
    allPrevBtn.on("click",function(){

        var curStep = $(this).closest(".setup-content"),
        
        curStepBtn = curStep.attr("id"),
        
        prevStepWizard = $('div.setup-panel div a(href="#' + curStepBtn + '")').parent().prev().children("a");
        
        prevStepWizard.removeAttr('disabled').trigger('click'); 
        
        });
    $('div.setup-panel div a.btn-primary').trigger('click');

}



    <Animated className="change-p" animationIn="fadeIn" isVisible={true}>
                    <div className="bgBco">
                        <div class="stepwizard" id="wizardBtn">
                            <div class="stepwizard-row setup-panel">
                                <div class="stepwizard-step">
                                    <a href="#step-1" type="button" class="btn btn-primary btn-circle pasos">1</a>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-2" type="button" class="btn btn-default btn-circle disabled pasos">2</a>
                                </div>
                                <div class="stepwizard-step">
                                    <a href="#step-3" type="button" class="btn btn-default btn-circle disabled pasos">3</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <Form style={{paddingBottom:'7rem' , marginBottom:'6rem'}} id="registrarse" className="bg-light w-90 mx-auto pt-3 pr-3 pl-3 signin" id="form" onSubmit={this.handleSubmit} noValidate >
                    
                     <div className="w-90 mx-auto p-1 text-dark text-center mb-4 " >
                        <div class="row setup-content step" id="step-1" style={{paddingTop:"3em"}}>
                            <div class="col-xs-12">
                                <div class="col-md-11">
                                    <div className="datoSPersonales">
                                        <h5> Paso 1  </h5><span style={{marginLeft:"-6.5em",width:"100%"}}>- Datos personales</span>
                                    </div>
                                    
                                    <FormGroup>
                                        
                                        <Input type="text" name="nombre" id="nombre" className="input" style={{textTransform:"uppercase"}} maxLength="20" placeholder="Nombre" onChange={this.handleChange} />
                                    </FormGroup>
                                    {this.state.errors.nombre.length > 0 && 
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.nombre}</span>}  
                
                                    <FormGroup className="mb-4">
                                        
                                        <Input type="text" name="apellido" id="apellido" className="input" style={{textTransform:"uppercase"}} maxLength="20" placeholder="Apellido" onChange={this.handleChange}/>
                                    </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.apellido}</span>  
                
                                    <FormGroup tag="fieldset">
                                        <label className="label mb-2">Género</label>
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <FormGroup check>
                                                        <Label check>
                                                            <Input type="radio" defaultChecked name="genero" className="input" value="M" />{' '}
                                                            Masculino
                                                        </Label>
                                                        </FormGroup>
                                                    </td>
                
                                                    <td style={{paddingLeft:"50px"}}>
                                                        <FormGroup check>
                                                        <Label check>
                                                            <Input type="radio" name="genero" className="input" value="F"/>{' '}
                                                            Femenino
                                                        </Label>
                                                        </FormGroup>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </FormGroup>
                                    <FormGroup className="mt-4">
                                        <Label className="label" id="fechaNac" for="fecNac">Fecha de nacimiento <span className="text-secondary text-small">*</span></Label>
                                        <div className="row" style={{position:"relative",top:"-1.23813em"}}>
                                            <div className="col sm-3 p-1 text-center">
                                                <NumberFormat className="form-control ml-2" id="RegDia" name="RegDia" style={{width:'70%'}}  displayType={'input'}  value={this.state.diaFecNac} placeholder="Día" thousandSeparator={false} format="##"  isAllowed={(values) => {const { formattedValue, floatValue } = values; return formattedValue === "" || ((floatValue>=1) && (floatValue <= 31));}}   
                                                    onValueChange={values => {
                                                        const { formattedValue, floatValue } = values;
                                                        this.setState({diaFecNac : floatValue});
                                                        this.validarFecha();        
                                                }}       
                                            />
                                            </div>
                                            <div className="col sm-6 p-1">
                                                <Input style={{width:'130%', marginLeft:'-15%'}} type="select" name="RegMes" id="RegMes" className="input" placeholder="" onChange={this.handleChange}>
                                                    <option value="0">Enero</option> <option value="1">Febrero</option> <option value="2">Marzo</option> <option value="3">Abril</option> <option value="4">Mayo</option> <option value="5">Junio</option> <option value="6">Julio</option> <option value="7">Agosto</option> <option value="8">Septiembre</option> <option value="9">Octubre</option> <option value="10">Noviembre</option> <option value="11">Diciembre</option>
                                                </Input>
                                            </div>
                                            <div className="col sm-3 p-1">

                                            <NumberFormat className="form-control ml-4" id="RegAnio" name="RegAnio" value={this.state.anioFecNac} style={{width:'70%'}}  displayType={'input'} placeholder="Año" thousandSeparator={false} format="####"  isAllowed={(values) => {const { formattedValue, floatValue } = values; return formattedValue === "" || ((floatValue>=1) && (floatValue <= 9999));}}   
                                                    onValueChange={values => {
                                                        const { formattedValue, floatValue } = values;
                                                        this.setState({anioFecNac : floatValue});
                                                        this.validarFecha();        
                                                }}       
                                            />  
                                            </div>
                                        </div>
                                    </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.fecNac}</span>  
                                    <div id="dniForm">
                                        <FormGroup>
                                        
                                        <Input type="select" name="tipoDocu" placeholder="Tipo de Documento" id="tipoDocu" className="input" onChange={this.handleChange}>
                                            {jsxTiposDocumentos}
                                        </Input>
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.tipoDocu}</span>  
                    
                                        <FormGroup>
                                            
                                            <NumberFormat className="form-control" id="nroDocu" name="nroDocu" value={this.state.nroDocu} displayType={'input'} placeholder="Número de documento" thousandSeparator={false} format="####################" onValueChange={(values) => {this.setState({nroDocu:values.formattedValue});  this.handleChangeNroDocu()}} />          
                                        </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.nroDocu}</span>  
                                
                                    </div>
                                    <FormGroup className="mb-3">
                                        


                                            <div id="botonSeleccionarAgencia" tabIndex="-1">
                                                
                                            {this.state.agenciaSeleccionada !== null &&
                                            <div className="text-center mt-1">
                                                <button type="button" className="btn btn-info mx-auto" data-toggle="modal" data-target="#agenciaModal">
                                                    Todavía podes cambiar tu agencia
                                                </button>

                                            </div>}

                                            {this.state.agenciaSeleccionada === null &&
                                            <div className="text-center mt-1">
                                                <button type="button" onClick={this.seleccionaTuAgencia} className="btn btn-secondary agencia mx-auto" data-toggle="modal" data-target="#agenciaModal">
                                                    <span>Agencia donde podrá realizar retiros</span> <br/>
                                                    <p>Selecciona tu agencia amiga!</p>
                                                </button>

                                            </div>}

                                            {this.state.agenciaSeleccionada !== null &&
                                            <div className="text-center mt-3">
                                                <span>Agencia {this.state.agenciaSeleccionada.descAgencia}</span> - <span>{this.state.agenciaSeleccionada.direccion}</span>
                                                <br></br>
                                                <span>{this.state.agenciaSeleccionada.localidad}</span>
                                            </div>}
                                            </div>  
                                    </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.agencia}</span>
                                    
                                    {(this.state.estadoRegist === "INICIO"  || this.state.estadoRegist === "FIN") &&    
                                        <button class="btn btn-primary nextBtn pull-right" type="button" style={{marginTop:"-.72em"}} >Siguiente</button>
                                    }
                                    
                                </div>
                            </div>
                        </div>{/* /step-1 */}

                        <div class="row setup-content step hidde" id="step-2" style={{paddingTop:"2em"}}>
                            <div class="col-xs-12">
                                <div class="col-md-11">
                                    <div className="datoSPersonales">
                                        <h5> Paso 2  </h5>
                                        <span style={{marginLeft:"-4.5em",width:"66wh",justifyContent:"center"}}> - Datos de Contacto</span>
                                    </div>
                                
                                    <div className="agenciaForm">
                                        <FormGroup>
                                        
                                            <Input type="select" name="provincia" id="provincia" className="input" placeholder="Provincia" onChange={this.handleChange}>
                                                {jsxProvincias}
                                            </Input>
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.provincia}</span>  

                                        <FormGroup>
                                            
                                            <Input type="select" name="localidad" id="localidad" className="input" placeholder="Localidad" onChange={this.handleChange}>
                                                {jsxLocalidades}
                                            </Input>
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.localidad}</span>  

                                        <FormGroup>
                                            
                                            <Input type="text" name="direccion" id="direccion" className="input" style={{textTransform:"uppercase"}} maxLength="100" placeholder="Dirección*" onChange={this.handleChange} />
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.direccion}</span> 
                                        
                                        <FormGroup>
                                            
                                            <Input style={{textTransform:'lowercase'}} type="email" className="input" name="correo" id="correo" maxLength="100" placeholder="Email*" onChange={this.handleChange}/>
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.correo}</span>  
                                        
                                        <FormGroup className="mb-4">
                                            
                                            <Input type="text" name="telefono" id="telefono" className="input" maxLength="20" placeholder="Teléfono*" onChange={this.handleChange} />
                                        </FormGroup>
                                        <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.telefono}</span>
                                        
                                        <FormGroup className="mb-3 mt-4" check>
                                            <Label className="label" check>
                                                <span className="ml-2 notiRegistro">Recibir notificaciones por email (Cupones premiados, informacion, etc).</span> 
                                                <div className="double acepto" style={{position:"absolute", left:"0", top:"12%"}}><br/><Input className="m-0" type="radio" name="aceptarNoti" id="notificacionCorreo" onClick={this.handleNotificarCorreo}/><span>Acepto</span></div>
                                                
                                            </Label>
                                        </FormGroup>  


                                    </div>
                                    
                                        <button class="btn btn-warning backBtn pull-right prevBtn" type="button" ><span>&#x2190;</span></button>
                                    
                                    
                                    {(this.state.estadoRegist === "INICIO"  || this.state.estadoRegist === "FIN") &&
                                        <button class="btn btn-primary nextBtn pull-right" type="button" >Siguiente</button>    
                                    }
                                        
                                    
                                    
                                </div>
                            </div>
                        </div>  {/* /step-2 */}

                        <div class="row setup-content step hidde" id="step-3" style={{paddingTop:"3em"}}>
                            <div class="col-xs-12">
                                <div class="col-md-11">
                                    <div className="datoSPersonales">
                                        <h5 style={{marginLeft:"-1.2448em",marginBottom:"1em"}}> Paso 3  </h5>
                                        <span style={{width:"66wh",justifyContent:"center",float:"left",marginLeft:"-4.3333em"}}> - Datos de Seguridad</span>
                                    </div>
                                    <FormGroup>
                                        {/* <Label className="label" for="clave">Clave <span className="text-secondary text-small">*</span></Label> */}
                                        <div className="input-group">
                                            <Input type="password" name="clave" id="clave" className="input" maxLength="20" placeholder="Contraseña *" onChange={this.handleChange} />
                                            <div onClick={this.handlePassView}  className="text-center border" style={{width: '15%'}}>
                                                <i className="fa fa-eye-slash mt-2" aria-hidden="true" id="eye"></i>
                                            </div>  
                                        </div>
                                    </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.clave}</span>
                
                                    <FormGroup>
                                        {/* <Label className="label" for="confirmaClave">Confirma clave <span className="text-secondary text-small">*</span></Label> */}
                                        <div className="input-group">
                                            <Input type="password" name="confirmaClave" id="confirmaClave" className="input" maxLength="20" placeholder="Confirma contraseña" onChange={this.handleChange}/>
                                            <div onClick={this.handlePassView2}  className="text-center border" style={{width: '15%'}}>
                                                <i className="fa fa-eye-slash mt-2" aria-hidden="true" id="eye2"></i>
                                            </div>  
                                        </div>
                                    </FormGroup>
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.confirmaClave}</span>
                                    
                                    <p style={{textAlign:"justify"}}>La contraseña debe contener al menos 8 caracteres, una letra mayúscula, una letra minúscula y un número.</p>
                                    <FormGroup>
                                    <div id="IngresoCaptcha" tabIndex="1000">   
                                        {jsxCaptcha}
                                    </div>      
                                    </FormGroup>        
                                    
                                    <div className="ml-2" style={{textAlign:"left"}}>Términos y condiciones - <a href="#">Ver</a> </div>            
                                    <FormGroup className="mb-4 mt-4" check>
                                        <Label className="label" check>
                                            <div className="double" style={{position:"absolute", left:"0", top:"12%"}}><Input className="m-0" type="radio" name="aceptarTerminos" id="aceptarTerminos" onClick={this.handleClickTerminos}  /></div>
                                            <span className="ml-2" style={{marginRight:"9em",fontWeight:"700"}}>Acepto <span className="text-secondary text-small">*</span></span>
                                        </Label>
                                    </FormGroup>  
                                    <span className="text-danger text-small" style={{position:"relative",top:"-15px"}}>{this.state.errors.aceptarTerminos}</span>  
                    
                                    
                                        <button class="btn btn-warning backBtn pull-right prevBtn" type="button" ><span>&#129044;</span></button>
                                            
                                        {(this.state.estadoRegist === "INICIO"  || this.state.estadoRegist === "FIN") &&
                                        <button class="btn btn-success finishBtn pull-right"  type="submit" onClick={this.handleSubmit}>Registrarse</button>
                                        }
                                    
                                </div>
                            </div>
                        </div>{/* /step-3 */}                                   
                     </div>
                    </Form>
                    </Animated>

Este es mi formulario y la función que debería hacer desaparecer a los step-1 y step-2 y hacer que los botones pasen a la siguiente sección. Pido disculpas si hay cosas que no comprendo por eso me apoyo en esta comunidad para poder avanzar en el aprendizaje. Desde ya agradecido estoy por su comprensión y explicacion!