Setting HTML Element's "coordinates"?

I have some images I'd like to include.This first image is of one of two user input forms. Notice in the top left of the picture, the second tab is selected.The arrow is pointing to the little calendar icon. This icon, when clicked, will display a calendar date-picker tool right beside the icon.To achieve this, I'm using the following code:

calendar = document.getElementById("calendar_popup");
icon = document.getElementById(icon);
//alert(icon.offsetParent.tagName);[code]..........

This works wonderfully in THIS form, as shown below: However, when I go to the tab to the right (3rd from the right of all 3 tabs). I come to another form that's identical to the one shown above. When I click on the calendar icon though, the calendar popup is displayed in the incorrect area.In this case, the popup is covering the calendar button. This will occur all the time between the two. It doesn't matter if one icon is selected prior to the other one.The icons both have different ID to prevent cross-id issues.