How to make link sharing in php

Videos come from a folder and are automatically displayed on my website. But I am having a problem at implementing share feature. All I want to do is when share button is pressed, video's whole path like https:\\example.com\vid.mp4 should show up. I tried but it just shows the location of very last video on my page.

My php:

    $exten = '.mp4';
     $dir = __DIR__ . DIRECTORY_SEPARATOR . "gallery" . DIRECTORY_SEPARATOR;
     $videos = glob("$dir*.{mp4}", GLOB_BRACE);
   $alt = glob("$dir*.{webm,mp4,ogg}", GLOB_BRACE);
     if (count($videos) > 0) { foreach ($videos as $vid) {
        $base = basename($vid,'.mp4');
       printf("<div class='vi'><video src='gallery/%s' id='basename($vid,'.mp4')' loop='loop'></video>", rawurlencode(basename($vid)));
       echo '<div class="sh"><button class="share" onclick="phprun()">SHARE</button></div>' ;
     
     echo "<div class='title'>".basename($vid,'.mp4')."</div></div>";
}}
  ?>

My js:

var result ="<?php echo('http://victure.freecluster.eu/gallery/'.basename($vid)); ?>"
const copy = document.getElementById("copy");
 const h1 = document.getElementById("h1");
 const h2 = document.getElementById("h2");
 
function phprun(){
 if (copy.style.display === "none") {
    copy.style.display = "block";
  } else {
    copy.style.display = "none";
  }
  h1.innerHTML="SHARE:  "+"<?php echo(basename($vid,'.mp4')); ?>";
  h2.innerHTML=result;
//  alert(result)
}

It makes a div appear with video's path but it is showing the path of only one video.

Note: Keep in mind it is automated.

In short: How to display path of each video?

You can see working problem here: Problem

Thanks in advance:)

Solution

What you need is to get the onclick target (like explained here) in order to make your content dynamic.

1. 'onclick' event: pass the 'this' parameter to your function phprun(). For an event, 'this' as a parameter refers to the target of the event (the div on which the event has been fired).

<div class="vi">
   <video src="..." id="..." loop="..."></video>
   <div class="sh">
   <button class="share" onclick="phprun(this)"> // <-----(GET THE EVENT TARGET)
      <svg class="..."></svg>
   </button></div>
   <div class="title">Demo from ShazamBolt8</div>
</div>

2. In your function: inject the event target ( phprun(target){...} ) then use it in your logic. Example of code for your function:

function phprun(target) { // <-----( INJECT THE EVENT TARGET)

    // get the video element from the target
    let videoEl = target.parentNode.parentNode.childNodes[0];

    // retrieve the data you want (eg. the video url and title)
    let videoUrl = videoEl.getAttribute('src');
    let videoTitle = videoEl.documentQuerySelector('.title');

    // inject it into the desired containers
    h1.innerHTML = 'Share:' + videoTitle;
    h2.innerHTML = videoUrl;

    // do more stuff...
    if (copy.style.display === "none") {
        copy.style.display = "block";
    } else {
        copy.style.display = "none";
    }

}