Href="#" works in localhost but not in public - html

Question

I´m trying to implement a Login session in my website, but, i´m having trouble with this part:
<ul class="tab-group">
<li class="tab">Criar uma conta</li>
<li class="tab active">Possuo uma conta</li>
</ul>
<div class="tab-content">
<div id="login" name="login">
<h1>Bem vindo! ;)</h1>
<form action="principal.php" method="post" autocomplete="new-password">
<div class="field-wrap">
<label>
E-mail<span class="req">*</span>
</label>
<input class="tudomin" type="email" required autocomplete="new-password" name="email"/>
</div>
<div class="field-wrap">
<label>
Senha<span class="req">*</span>
</label>
<input type="password" required autocomplete="new-password" name="password"/>
</div>
<br/>
<p class="forgot">Esqueceu sua senha?</p>
<button class="button button-block" name="login" />Log In</button>
</form>
</div>
<div id="signup" name="signup">
<h1>Crie uma conta, é rapidinho!</h1>
<h5 style="color: red; background-color: white;">Sua conta será confirmada via SMS.</h5>
<br/>
<h6 style="color: red; background-color: white;">É necessário um telefone celular válido!</h6>
<form action="principal.php" method="post" autocomplete="new-password">
<div class="top-row">
<div class="field-wrap">
<label>
Nome<span class="req">*</span>
</label>
<input class="primaiusc" type="text" required autocomplete="new-password" name='firstname' />
</div>
<div class="field-wrap">
<label>
Sobrenome<span class="req">*</span>
</label>
<input class="primaiusc" style="text-transform: capitalize;" type="text"required autocomplete="new-password" name='lastname' />
</div>
</div>
<div class="field-wrap">
<!-- <input type="email"required autocomplete="off" name='email' style="display: none" /> Campo fake -->
<label>
E-mail<span class="req">*</span>
</label>
<input class="tudomin" type="email"required autocomplete="new-password" name='email' />
</div>
<div class="field-wrap">
<label>
Celular<span class="req">*</span>
</label>
<input type="text" required autocomplete="new-password" name='telefone' id='telefone' maxlength="15"/>
</div>
<div class="field-wrap">
<label style="left: calc(8.6em + 1vw)">
Data de Nascimento<span class="req">*</span>
</label>
<input type="date" required autocomplete="new-password" name='nascimento'/>
</div>
<div class="field-wrap">
<label style="left: calc(8.6em + 1vw)">
Instituição de Ensino<span class="req">*</span>
</label>
<select name="instituicao" class="req" required>
<option value="" disabled selected hidden></option>
<?php while($rowinst = mysqli_fetch_array($resultinst))
{
$datarowinst = '<option value="'.$rowinst['id'].'">'.$rowinst['instituicao'].'</option>';
echo $datarowinst;
}
?>
</select>
</div>
<div class="field-wrap">
<label style="left: calc(8.6em + 1vw)">
Período de Estudo<span class="req">*</span>
</label>
<select name="periodo" class="req" required>
<option value="" disabled selected hidden></option>
<option value="Manhã">Manhã</option>
<option value="Tarde">Tarde</option>
<option value="Noite">Noite</option>
<option value="Integral">Integral</option>
</select>
</div>
<div class="field-wrap">
<label>
Senha<span class="req">*</span>
</label>
<input type="password"required autocomplete="new-password" name='password'/>
</div>
<button type="submit" class="button button-block" name="register" />Criar conta!</button>
</form>
</div>
It supose to change the screen when a click on href="#signup" or href="#login".
And it works just fine on localhost but, for some reason it just doesn´t work on public. Any ideas?
To see what i´m talking about, this is the link:
https://www.educacaosc.com.br/Login/principal.php
Thanks!