Form inside a Collection generating Metadata in MemberStack

Dear all,

I have a form to mark videos as completed which generates metadata for each member once they click the button. When the member login again, all the videos “mark as complete” are still completed. Before the body tag, I have some custom code doing that. It’s working fine, but the idea would be having these buttons by the side of each video on the scroll menu (down left). But once I add the form “mark as complete” inside the collection, the snippet which generates the metadata stops working. Maybe I have to refer in a different way to the form once it’s inside the collection, and I don’t know how to do that. Bellow, I pasted the custom code that I’m using, also the way I would like it to be and the preview with the way it works. It would be great if someone could help me! Thanks in advance.

HOW IT SHOULD BE

PREVIEW

https://preview.webflow.com/preview/rioga?utm_medium=preview_link&utm_source=designer&utm_content=rioga&preview=de299b12faabd1eff8df3b8787eb480e&pageId=5e8702c3f15de5dd5f15595c&itemId=5e8702c3f15de575811559ee&mode=preview

CUSTOM CODE

<script src="https://api.memberstack.io/static/memberstack.js?webflow" data-memberstack-id="My ID"></script>

<script>
MemberStack.onReady.then(async function(member) {

	if(member.loggedIn){
		
	const metadata = await member.getMetaData();

  	metadata.videos = metadata.videos || [];

		const itemID = "Video Item ID (from CMS)"

	if(metadata.videos.includes(itemID)){
		document.getElementById('mark-as-watched').style.display = 'none';
		document.getElementById('video-complete').style.display = 'block';
	}
		
	$('#mark-as-watched').click(function(){

  		if(metadata.videos.indexOf(itemID) === -1){

				metadata.videos.push(itemID); 

  	  	member.updateMetaData(metadata);

      }
		});
  }
});
</script>

Where did you progress with this? Happy to see your custom code. I’m stuck in a similar fashion.