Q: changing text in a div?

Hi all,

We have a dozen or so objects in a scene, that when clicked on, will popup a modal window that contains a header text, a video and a footer text.

To keep things manageable, we would like to have just one block of HTML code for the popups, and change the text & video via puzzles for every object clicked.

We got this working the video source in the iframe, but we’re a bit stuck for getting it working for the header & footer texts.

All the div’s have appropriate id’s, but we try to figure out how to to this the best way. Is it possible with puzzles like with the iframe?
Or do we need some form of jscript?
This is the basic code for the popup:

<div id="video" class="modal_video">
	<div id="info_all" class="modal">
		<div id="headervid" class="modal_header"><h5>header_text</h5>
			<div id="video_close" class="modal_close" >&times;</div>
		</div>
			<div id="blockall">
				<div id="modal_vid" class="iframe_vid">
                	<iframe id="videolink_var" width="720px" height="405px" src="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
			</div>
				<div id="modal_vidtext">
					<div id="footer_intro" class="modal_p">footer_intro_text</div>
                        <div id="footer_text">
                        <p>paragraph_text</p>
                        </div>
				</div>
	</div>
</div>

Where can we set up/change the html code so the text in header_text, footer_intro_text & paragraph_text is changed based on the object clicked, liked with the video code.

We’re seem to be stuck atm with the html side of things, and hope someone can point us in the direction of a simple solution for the text changes.

cheers,

rob