Why isn't Jquery giving the <divs> the collapsed class when the anchors are clicked on?

$(document).ready(function() {

    $("div #register").addClass('collapsed');
    
    $('#form a').click(function(event) {

        event.preventDefault();
        $(event.target).parent().parent().parent().addClass('collapsed');
        $(event.target).parent().parent().parent().siblings().removeClass('collapsed');

        document.title = $(event.target).attr('id');
    });
});

.collapsed {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
            <div id="register" class="">
                <h2>Register</h2>
                <form action="login_register.php" method="post">
                    <span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
                    <div id="half-left" class="textbox">
                        <input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
                    </div>
                    <div id="half-right" class="textbox">
                        <input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                </form>
            </div>
            <div id="login" class="">
                <h2>Login</h2>
                <form action="login_register.php" method="post">
                    <span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                    <span class="password">Forgot <a href="#">password?</a></span>
                </form>
            </div>
        </div>