I've got a web page (Web Part, to be more specific - this is a Sharepoint 2010 extravaganza) that morphs based on who is using it. This simply means that if you are in the "for someone else" category, you will see the entire page, but if you are in the "for self" category, you will see a subset of the page - certain sections will not be shown.

The user self-identifies as to what type of user he is. The page begins with a default "for self" scenario (two sections are not shown unless they define themselves as a "for someone else" type).

I created the whole page dynamically in C# (server-side/code-behind) and then make those two sections "disappear" in jQuery like so:

1. $(document).ready(function () {
       console.log('The ready function has been reached'); /* This is a "sanity check" so it can be verified that this jQuery script is running/ran */
       /* These sections start off invisiblized */
       $('[id$=panelSection2]').slideUp();
       $('[id$=panelSection3]').slideUp();
   });

And then I toggle between the two states using a pair of radio buttons, whose code is:

1. /* If user selects "payment for self" (they are seeking payment for themselves, as opposed to someone else), omit (invisibilize) sections 2 and 3 on the form TODO: Should I change these from "change" to "click" */
   $(document).on("click", '[id$=rbPaymentForSelf]', function () {
       if (this.checked) {
           $('[id$=panelSection2]').slideUp();
           $('[id$=panelSection3]').slideUp();
       }
   });
   
   
   /* If user selects "payment for someone else" (they are seeking payment for someone else, as opposed to themselves), make sections 2 and 3 on the form visible */
   $(document).on("click", '[id$=rbPaymentForSomeoneElse]', function () {
       if (this.checked) {
           $('[id$=panelSection2]').slideDown();
           $('[id$=panelSection3]').slideDown();
       }
   });

This works great, but only *after* I have selected "for someone else" once. The first selection of "for someone else" does indeed cause sections 2 and 3 to display, but *below* where they should be (below section 4). So what starts out as:

1. Section 1
2. Section 4
3. Section 5
4. Section 6

Is, after selecting "someone else":

1. Section 1
2. Section 4
3. Section 2
4. Section 3
5. Section 5
6. Section 6

If I then select "for self" it goes back to the original:

1. Section 1
2. Section 4
3. Section 5
4. Section 6

and if I select "for someone else" *after that first time*, it's fine; it's:

1. Section 1
2. Section 2
3. Section 3
4. Section 4
5. Section 5
6. Section 6

Why is it doing this (putting sections 2 and 3 below section 4 the first time and the first time only) and what can I do to rectify it?