divs hiding under each other

I have this simple checkbox menu
http://myresearchfinder.com/dev/checktest.html

If you check the cancer box a div will appear. If you check lung, another menu pops up. If you check colon nothing appears because it's behind the lung div. I am aware of z-index. But because a person may go back and forth between menus I need a way to make sure the appropriate div is always on top. Any ideas?

 

Try this:

<script>

var zindex=20;

function gofade(clicker,fadediv)
{

if ($(clicker).attr("checked")) {
        //do stuff if the checkbox is checked
		$(fadediv).css("z-index",zindex.toString());

		$(fadediv).fadeIn("slow");
		zindex+=1;
    } else {
        //do stuff if the checkbox isn't checked
		$(fadediv).fadeOut("slow");
		zindex-=1;
    }

}

/*

$('#lung').click(function () {
    if ($(this).attr("checked")) {
        //do stuff if the checkbox is checked
		$("#two").fadeIn("slow");
    } else {
        //do stuff if the checkbox isn't checked
		$("#two").fadeOut("slow");
    }
});

*/
	   
</script>

Code (markup):