The same ID in multiple pages?

The same ID in multiple pages?

I have a strange problem, but after reading a few posts here I think I may have an idea what is causing it.

I have a panel with a form in it containing some radio options, two popups to pick a "to" and "from" date and some JavaScript to do some form validation. All those elements are in a PHP page that I include in several pages of the app.

When you pick dates in the form, you submit them and it reloads the current page, which reloads a new recordset from the database based on those dates, then the new data displayed is based on the new range of dates.

It works well, except for this problem. The first time you use the panel and select dates, it all works like a charm. However, the second time you use it, the popups don't work and the form validation doesn't work. If I manually reload the page, it all works again.

As I mentioned above, what I think may be happening is that the same panel and popups with the same ID's are loaded in every page. Perhaps it works the first time because those ID's are unique, but when it reloads after submitting the form in the panel, It loads another panel and popups with the same ID's and two of the same ID's are loaded in the DOM.

The funny thing is that the panel still works after the reload, just the popups for the date pickers and the form validation doesn't work. I can still submit the form and select radio options to reset the dates.

Does that sound like it could be causing a problem? Any ideas on how to solve it?

The app is at http://testing.itlogic.org/pokernola click on the calendar icon at the bottom left to get the panel and try it yourself. You can view the source of the page and see what is going on. If you go to a page and the calendar icon changes to a forbidden icon, naturally you can't use the calendar on that page.

Oh I forgot t mention. The text boxes in the panel are read only, but when you click on them, the popups for the date pickers come up.