如何在 Javascript 中显示/隐藏重叠的 div？

Question

I am working on Javascript to parse an 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

Answer 1

Better use css classes and call them in jQuery methods. Z-Index would make help you solve the problem of overlapping <div> s.