Bootstrap 4 Nav Pills doesn't respond when entering the second time - html

Question

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.

Answer 1

Your code looks normal and correct. But you have a lot of ID duplicates, like "email", "password", "submit". ID should be unique inside DOM, otherwise it may cause errors. Correct this and maybe everything will work fine.
Your code works fine with latest jQuery and Bootstrap CDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
UPDATED
If your BS script work correctly - the URL of the page shouldn't change on pills clicking. So, after reloading the page - everything should work fine. If your URL changes while you clicking on pills - there is some other script, which have an influence on bootstrap.