Why are my elements not display after a click event, while the same piece of code works in a different place?

Question

I implemented a button to display an input field after the button has been clicked, I checked that it worked but as I was doing some final debugging, the button doesn't work again. The strange thing is that, the same piece of code works for a different button. Would you please have a look how I can fix the bug? Thanks a lot!

Here is the code for buttons and input field. The button "Change Password" works, the "Reject" button does not.

    <div>

        @if($user->user_status=="pending")
        <a style="float:right" class="btn btn-primary text-right" href="/users/approve_user/{{$user->id}}">Approve</a>
        <a style="float:right" class="btn btn-primary text-right" onclick="rejectClick()">Reject</a>
        @else
        <a style="float:right" class="btn btn-primary text-right" href="/users/delete_user/{{$user->id}}">Delete</a>
        <a style="float:right" class="btn btn-primary text-right" onclick="passwordClick()">Change Password</a>
        @endif
    </div>
    <div class="form-group">
        <form action="/users/reject_uesr/{{$user->id}}" method="post">
        <label for="textInput" class="hide" id="textTitle">Reject Reason: </label>
        <input class="form-control hide" name="reject_reason" value="" type="text" id="textInput" placeholder="Please write down the reason to reject this user:" />
        <input class="btn btn-primary hide" type="submit" id="textSubmit" value="Submit">
        {{csrf_field()}}
        </form>
    </div>

    <div class="form-group">
        <form action="/users/change_password/{{$user->id}}" method="get">
        <label for="textInput" class="hide" id="password">New Password </label>
        <input class="form-control hide" name="password" value="" type="text" id="passwordInput" placeholder="Please Enter The New Password:" />
        <input class="btn btn-primary hide" type="submit" id="passwordSubmit" value="Submit">
        {{csrf_field()}}
        </form>
    </div>
<style>
    .hide{
        display: none;
    }
    .show{
        display: block;
    }
</style>

Here is the code for script:

    <script>
    function rejectClick(){
        document.getElementById('textTitle').className="show";
        document.getElementById('textInput').className="show";
        document.getElementById('textSubmit').className="btn btn-primary show";
    }

    function passwordClick(){
        document.getElementById('password').className="show";
        document.getElementById('passwordInput').className="show";
        document.getElementById('passwordSubmit').className="btn btn-primary show";
    }
</script>