This is a little hard to explain. I'm creating a webpage that shows how other webpages will render in the browser. Here's a simplified version of the problem I'm having...
<div id="test">This is an example of page 1</div>
<div id="test">This is an example of page 2</div>
You can only have one id per element in an HTML document. So each div must have a different id, otherwise you will run into problems. If multiple elements need to have the same name, you can use classes
<div class="test" id="unique-id"></div> and then
<div class="test" id="another-id"></div>.
To answer your question with regards to iframes, yes, you need a separate page for each iframe. It is not possible to write code within the iframe tags to execute separately. See the iframe spec.
Edit: After reading the iframe spec myself, it appears you can use the
srcdoc attribute to overwrite what is in the
src attribute, but it looks like this isn't entirely accepted across browsers. MDN has more information about the attribute.