How to display a common html\javascript suffix with tabs

Question

Please excuse my not so great title. I don't do much HTML dev and I'm hacking and learning bits as I go. I'm trying to create a form with multiple views using Javascript and HTML.

My goal is to allow data to be entered in multiple modes. As an example, suppose they're entering data about a products in warehouse where page 1 deals mostly with warehouse info and page 2 deals mostly with product info. I'm currently doing this with jQuery tabs.

I currently use jQuery tabs from http://jqueryui.com/tabs/ with each tab

    <div id="tabs-1">
    <iframe src="enterdbInfo.shtml" width=100% height=1610>        
    </iframe></div>
    <div id="tabs-2">
    <iframe src="enterproducts.shtml" width=100% height=1610>        
    </iframe></div>

When a user clicks on a specific product on the enterDbInfo.shtml, I show a product details view. The problem is that I also show the same product details view in enterproducts.shtml. This is done with a shared html document that is included using SSI in both docs.

When enterdbInfo.shtml and enterproducts.shtml are viewed separately, they look fine. But when they are loaded in the same parent document with tabs, the javascript that acts on the product details field in acts on only the elements in enterdbInfo.shtml and not on the enterproducs.shtml fields of the same name. I know why it happens, but I don't know of I nice way around it.

Is there a nice way around this?