Append HTML-element to collection item

Design help Custom code
1

Hi guys,

I want to append a HTML-video element to a collection item, using a link from the CMS as my source for the video. My problem is that I can’t target the specific item for appending the element.

This is my script.

<script>
(function createVideo() {
   const link = 'link from CMS'
   const updatedLink = link.slice(0, -4) + 'raw=1';
   const video = document.createElement('video');
   const source = document.createElement('source');
   source.src = updatedLink;
   source.type = 'video/mp4';
   video.controls = true;
   video.autoplay = true;
   video.controlsList = 'nodownload';
   video.appendChild(source);
   video.classList.add('video-element');
   
   const wrapper = document.getElementById('video-wrapper');
   wrapper.appendChild(video);
})();
 </script>

This is obviously not working since I’m getting all elements with id ‘video-wrapper’, hence I’m only appending all videos to the first video wrapper in the collection list.

Any ides for how I could append each video to each collection item separately?

Here is my site Read-Only: https://preview.webflow.com/preview/entrance-4aa4c2?utm_medium=preview_link&utm_source=designer&utm_content=entrance-4aa4c2&preview=994da73854199a7377b3905c9407e77b&workflow=preview