JS Tabs не переключаются вкладки

var formOne = $('form#s-1'); 
var formTwo = $('form#s-2'); 
var formThree = $('form#s-3'); 
var buttonRole = $('[role="presentation"]'); 
 
formOne.submit(function (e) { 
  e.preventDefault(); 
  var form = $(this); 
  $.ajax({ 
    url: "/forgot", 
    type: "POST", 
    data: new FormData(this), 
    contentType: false, 
    cache: false, 
    processData:false, 
    success: function(data){ 
      if(data.success == true){  
        $('#step-1').removeClass('active'); 
        $('#step-2').addClass('active'); 
        buttonRole.eq(0).removeClass('active'); 
        buttonRole.eq(1).addClass('active'); 
      }else{ 
       $("#res").html(data); 
       setTimeout(function(){ 
        $('#res').show().delay(1000).fadeOut(); 
      },  500);  
     } 
      
   } 
    
 }); 
});

<ul class="nav nav-tabs" role="tablist"> 
  <li role="presentation" class="active"> 
    <a href="#step-1" aria-controls="step-1" role="tab" data-toggle="tab" aria-expanded="true">Step-1</a> 
  </li> 
  <li role="presentation"><a href="#">Step-2</a></li> 
  <li role="presentation"><a href="#">Step-3</a></li> 
</ul> 
 
 
<div role="tabpanel" class="tab-pane active" id="step-1"> 
  <form method="POST" id="s-1"> 
    <div class="youplay-input"> 
      <input type="text" id="loginOrEmail" name="loginOrEmail" placeholder="<?php echo $Lang['mes137']; ?>" required/> 
    </div> 
    <center> 
      <button type="submit" id="submit" class="btn btn-default">Submit</button> 
    </center> 
  </form> 
</div>