In a Tecton Modal, I would like to include a link to one of our corporate web pages. The modal appears as below:

Where the text reads, "Help Center page," the user should be able to navigate to the web page upon clicking the text. The following JavaScipt has been written for this action:

const helpCenterWebLinks = document.querySelectorAll(".help-center-web-link");

helpCenterWebLinks.forEach((link) => {
	link.addEventListener("click", function () {
		const urlRequested = "https://www.randomcu.org/assistance/help/";
		tecton.actions.openURL(urlRequested, {
			showInOverpanel: false,
			nativeBrowserIfInApp: false,
			requiresToken: false,
		});
	});
});

When the time is appropriate, I am showing the modal with this JavaScript:

tecton.actions.showModal({
	title: "Cannot Unenroll While Transactions Are Pending",
	message: 
		"You cannot unenroll from Digital Banking with pending transactions on " +
		"your account. Please wait for these transactions to process before " +
		"restarting your unenrollment request." +
		`Please visit our <span class="web-links help-center-web-link">Help ` +
		`Center page</span> for further assistance.`,
	modalType: "error",
	isBlocking: true,
	close: false,
	msgHasMarkup: true,
});

The following CSS should be styling the link in the modal, too:

.web-links {
  color: hsl(206, 100%, 40%);
  text-decoration-line: underline;
}

.web-links:hover {
  cursor: pointer;
}

The issue that I am having with this method is that neither the CSS nor JavaScript is working when the modal appears. I am assuming that this has to do with the modal not immediately rendering upon the page loading, so the event listener is never put on the modal text.

For working with these modals, what is the best way to assign links within the text in such a way that tection.actions.openURL can be used? How can we edit the style of the text, too, to make it more clear that this is a link?