I have this code which depends on this javascript from dynamic drive: http://dynamicdrive.com/dynamicindex16/formdependency.htm Its a form dependency manager. Which will show or hide elements depending on what you choose from the forms that are revealed:

I don't know why but If I alter the code from this:

<td>
       <label>ID Number<input type="checkbox" name="id" class="DEPENDS ON info BEING student"></label>
           </td>
        </tr>

To this:

<td>
   <input type="hidden" class="DEPENDS ON info BEING student"> <label  style="margin-bottom: 1em; padding-bottom: 1em; border-bottom: 3px silver groove;"></label>
     <tr>
    <td>
    <input type="checkbox" name="id" class="DEPENDS ON info BEING student"><label>ID Number</label>
       </td>
    </tr>

Note: The only change that I did here is to transfer the label from the left side of the checkbox to the right side so that they will look better. But when I do this. The labels will be visible even if I did not yet click on the button that will make it visible(but without the checkboxes).

And when I click on that button, that's the only time when the checkbox will appear on the left side of the labels.

The checkbox is ok, but the label is not. And the javascript is working properly. What do I do so that the checkbox and label will go together?