How to display/hide overlapped divs in javascript?

I am working on javascript to parse xml file and then display it properly in HTML.

I am very new to all these technologies. What I am doing is parse the xml and generate the html form and user can perform submit action on it. I am successfully displaying the form. But I am generating the form inside for loop under new div each time and then assigning the newly div to TD of a table. Now I want to display particular div when user clicks on the label, but since it is generated in loop they overlapped to each other, so it is displaying only the last div.

How can I display/hide overlapped divs in javascript?

Here is my jsfiddle .

And the xml file

    <?xml version="1.0" encoding="UTF-8"?>
<CONTROLLERS>
    <CONTROLLER>
        <TITLE>User</TITLE>
        <ACTION>
            <LABEL>Create User</LABEL>
            <HTTP_METHOD>POST</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>user_name</NAME></PARAM>
               <PARAM><NAME>first_name</NAME></PARAM>
               <PARAM><NAME>last_name</NAME></PARAM>
            </PARAMS>
        </ACTION>
        <ACTION>
            <LABEL>Update User</LABEL>
            <HTTP_METHOD>POST</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>id</NAME></PARAM>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>user_name</NAME></PARAM>
               <PARAM><NAME>first_name</NAME></PARAM>
               <PARAM><NAME>last_name</NAME></PARAM>
            </PARAMS>
        </ACTION>
    </CONTROLLER>
    <CONTROLLER>
        <TITLE>Admin</TITLE>
        <ACTION>
            <LABEL>Create Admin</LABEL>
            <HTTP_METHOD>GET</HTTP_METHOD>
            <PARAMS>
               <PARAM><NAME>email</NAME></PARAM>
               <PARAM><NAME>admin_name</NAME></PARAM>
               <PARAM><NAME>password</NAME></PARAM>
            </PARAMS>
        </ACTION>
    </CONTROLLER>
</CONTROLLERS>

Currently the view looks like