Links not working if a div is after them

Links not working if a div is after them

I am creating a several step sign up process for our company.  I want a new div for each step along the way.  I will then either accordian or some other style for them as the customer progresses through the process.

I want to use a hierarchy like
div#step1
-->content
div#step2
-->content

etc.

I have step1 complete and works great until I put the step2 div after.  The links in step1 are not clickable after step2 is added.   If I remove the step2 div it works normally.

Here is the markup:
  1. <div id='hiddenInViewSource'>
               
                <p id='helloParagraph'>
                    blah blah blah
                </p>
                <p>
                    NOTE: Your contract is available for 30 days after the confirmation email was sent.
                </p>
                <hr>
                <div id='step1'>
                    <h1>Step 1</h1>
                    <p>Download and sign your contract.</p>
                    <h3>Please Select A Format:</h3>
                    <div id='downloadLinks'>
                        <!--  Container for generated download links -->
                        <div id='pdfLinks'></div><div id='jpgLinks'></div>
                    </div>
                </div>


















  4.             <!-- DIV step2.. If this is removed it works fine -->
                <div id='step2'>
                    <hr>
                    <h1>Step 2</h1>
                    <p>
                        Once you have completed your contract, please return it to us to
                        complete the process.  You may email, fax, or mail your contract.
                    </p>
                </div>
                <!-- End Div step2 -->










  6.         </div><!-- End  page content -->
The reason I'm posting this in a jQuery forum is because the links are populated through the ajax returned in a jQuery UI dialog...