I have the following jQuery code:

```
<script> function hideMenteeQuestions() {
    $("#menteeapp").hide();
    $("textarea[name='short_term_goals']").rules("remove", "required");
    $("textarea[name='long_term_goals']").rules("remove", "required");
}

function showMenteeQuestions() {
    $("#menteeapp").show();
    $("textarea[name='short_term_goals']").rules("add", {
        required: true
    });
    $("textarea[name='long_term_goals']").rules("add", {
        required: true
    });
}

function hideMentorQuestions() {
    $("#mentorapp").hide();
    $("input[name='mentees']").rules("remove", "required");
}

function showMentorQuestions() {
    $("#mentorapp").show();
    $("input[name='mentees']").rules("add", {
        required: true
    });
}

</script>

<script>
    $(document).ready(function(){

    $("#mentee").change(function(){
      if($(this).is(':checked')){
        showMenteeQuestions();
      }else{
        hideMenteeQuestions();
      }
    });
    $("#mentor").change(function(){
      if($(this).is(':checked')){
        showMentorQuestions();
      }else{
        hideMentorQuestions();
      }
    });

    $('#mentee').change();
    $('#mentor').change();

    });
    </script >

```

Also, here's the HTML for my checkboxes:

```
<input type="checkbox" name="type[]" id="mentor" value="mentor"><span class="checkbox">Mentor</span>
<input type="checkbox" name="type[]" id="mentee" value="mentee"><span class="checkbox">Mentee</span>

```

It's supposed to hide certain divs based on the checkbox you're selecting. It works when you click the checkboxes. However, I also want to trigger the change functions on page load. For some reason, it's only calling the first change function, which in this case is for `#mentee`. If I change the order, then the other one works. It never gets into the second `change()` call.

Any ideas?