I am playing around with toggle overlay to open up a little help window for users.
If I have a field where they are supposed to fill in something, I added a little question mark image next to the field, where they can click and a little window opens up describing what it's all about.

It works fine, but now I want to add questionmarks to other fields in the same window, opening up a different message. But, where should I add the code to make this work, so the script knwos what window is connected to what question mark?

I just found some code where I used copy and paste. So, I have no idea what it's doing and why.

Here are the stuff I have from the head and body parts. But, as it is now, only the first description opens up when I click the question marks.
I need something to separate them or id them or whatever... but how?

PHP Code:
<style type="text/css">
   
div#overlay {
    
displaynone;
    
z-index2;
    
background#000;
    
positionfixed;
    
width100%;
    
height100%;
    
top0px;
    
left0px;
    
text-aligncenter;
}
div#specialBox {
    
displaynone;
    
positionrelative;
    
z-index3;
    
margin150px auto 0px auto;
    
width400px
    
height200px;
    
background#666;
    
color#000;
}
</
style>

<
div id="overlay"></div>
<
div id="specialBox">
  <
p>FIELD ONE<br />
  
This field is for a description of field one.</p
  <
button onmousedown="toggleOverlay()">Close Overlay</button>
</
div>

<
div id="overlay"></div>
<
div id="specialBox">
  <
p>This is the second help window telling you what this is about.</p
  <
button onmousedown="toggleOverlay()">Close Overlay</button>
</
div>

<
p>FIELD ONE<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br />
<
p>FIELD TWO<img onmousedown="toggleOverlay()" src="./img/questionmark.gif" alt="example"><br />