javascript - Multiple functions with button by changing class fails after changing class once -

i have form , want switch between login , register easily. have set if user clicks register register form shows , button changes button take them login form if desired.

however when user goes login form, won't let them register form again.

$('.register-form').hide();    $('a.register').click(function() {    $('.login-form').hide();    $('.register-form').show();        $('button').text('register');    $('a.register').removeclass('register').addclass('login-return').text('back login');  });    $('a.login-return').click(function() {    $('.register-form').hide();    $('.login-form').show();        $('button').text('login');    $('a.login-return').removeclass('login-return').addclass('register').text('register');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form>    <div class="login-form">      <input type="email" name="email" placeholder="email"><br/>      <input type="password" name="password" placeholder="password">    </div>    <div class="register-form">      <input type="text" name="register-name" placeholder="name"><br/>      <input type="email" name="register-email" placeholder="email"><br/>      <input type="password" name="register-password" placeholder="password">    </div>    <button type="submit">login</button>    <a href="#" class="register">register</a>  </form>

since there not element .login-return class @ time of attaching events need use event delegation

$('form').on('click', 'a.register',function() { ... });  $('form').on('click', 'a.login-return',function() { ... }); 

read more event delegation here

below demo

$('.register-form').hide();    $('form').on('click', 'a.register', function() {    $('.login-form').hide();    $('.register-form').show();      $('button').text('register');    $('a.register').removeclass('register').addclass('login-return').text('back login');  });    $('form').on('click', 'a.login-return', function() {    $('.register-form').hide();    $('.login-form').show();      $('button').text('login');    $('a.login-return').removeclass('login-return').addclass('register').text('register');  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form>    <div class="login-form">      <input type="email" name="email" placeholder="email">      <br/>      <input type="password" name="password" placeholder="password">    </div>    <div class="register-form">      <input type="text" name="register-name" placeholder="name">      <br/>      <input type="email" name="register-email" placeholder="email">      <br/>      <input type="password" name="register-password" placeholder="password">    </div>    <button type="submit">login</button>    <a href="#" class="register">register</a>  </form>