I was creting a bootstrap page with nav pills to change between two html forms
<ul class="nav nav-pills my-5 d-flex justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active btn-lg" href="#login" id="pills-login-tab" data-toggle="pill" role="tab">Log-in</a>
</li>
<span class="mx-3 d-flex align-items-center"><h5><small>or</small></h5></span>
<li class="nav-item">
<a class="nav-link btn-lg" href="#register" id="pills-register-tab" data-toggle="pill" role="tab">Register</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--Log-in-->
<div class="tab-pane fade show active col-6 mx-auto" id="login" role="tabpanel">
<form action="login.php" method="post">
<input class="d-none" name="action" value="login" viewonly>
<!--Email-->
<div class="form-group">
<label for="email">Email</label>
<input class="form-control " type="email" id="email" name="email" value="" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Log-in-->
<!--Register-->
<div class="tab-pane fade" id="register" role="tabpanel">
<form class=" col-6 mx-auto" action="login.php" method="post">
<input class="d-none" name="action" value="register" viewonly>
<!--Name-->
<div class="form-group" id="name-form">
<label for="name">Name</label>
<input class="form-control" type="text" id="name" name="name" required>
<div class="invalid-feedback">
</div>
</div>
<!--Username-->
<div class="form-group" id="username-form">
<label for="username">Username</label>
<input class="form-control" type="text" id="username" name="username" required>
<div class="invalid-feedback">
</div>
</div>
<!--Email-->
<div class="form-group" id="email-form">
<label for="email">Email </label>
<input class="form-control" type="email" id="email" name="email" required>
<div class="invalid-feedback">
</div>
</div>
<!--Password-->
<div class="form-group" id="password-form">
<label for="password">Password</label>
<input class="form-control" type="password" id="password" name="password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Repeat Password-->
<div class="form-group" id="repeat-password-form">
<label for="rep-password">Repeat Passwords</label>
<input class="form-control" type="password" id="repeat-password" required>
<div class="invalid-feedback">
</div>
</div>
<!--Submit-->
<input class="btn btn-primary" type="submit" id="submit">
</form>
</div><!--Register-->
</div><!--Pills-->
I noticed that the first time that i visit that page it all works but if I go to the home page (or when I simply refresh) and then back to this page the nav doesnt work anymore.
I also noticed that if I chose the first option (default) and i refresh it works.
I don't really know what to do.
I'm using Node for backend.