Embed Inside Collection List is Only Changing One Item

Just what the title says, I’m making a video content library that has all videos listed and after they complete it, memberstack will hold onto that info for each member. I use this info to checkmark each video so the user knows which video they have finished. While the code works, it’s only affecting the most recently made item. I even did a test thumbnail and got a check if though it’s not supposed to where-as all the other videos that should be checked are gone.

(In this image it shows Thumbnail 1 is checked whereas 2 and 3 are not. The actual result I should be getting should be the opposite. My guess is that the code is only able to affect one div rather then each item in the collection list.)

My only solution to this is to figure out a code that dynamically changes each of collection item using the embed inside the each collection item.

Here’s my code, got these from @MackenzieChild in his Step 7 of 7 tutorial except I use it in my collection items.

<script src="https://api.memberstack.io/static/memberstack.js?webflow" data-memberstack-id="MEMBERSTACKID"></script>
MemberStack.onReady.then(async function(member) {
	// Checks if member is logged in
	const metadata = await member.getMetaData();
	// If no metadata.video exists, create it in MemberStack.
  	metadata.videos = metadata.videos || [];
	// Defines the webflow video ID to a const of itemID (Pull this from the CMS)
		const itemID = "[VIDEO PAGE ID]"
	// If they have the item ID in their profile, hide the form, show the 'completed button'
		document.getElementById('reward-box').style.display = 'none';

Here is my site Read-Only: LINK
(how to share your site Read-Only link)