title: How to get the source from a video element inside a div and pass it on to another video element - javascript
body: <p>Im really new to JavaScript and I started a new project that consists in a video player and editor.</p>
  
  <p>I have this modal Box:</p>
  
  <pre><code>&lt;div class="modal" id="myModal"&gt;
    &lt;div class="modal-header"&gt;
       &lt;/div&gt;
       &lt;div class="modal-body"&gt;
          &lt;video src="images/movie.mp4.mp4" autoplay muted class="videoPreview"&gt;&lt;/video&gt;
       &lt;/div&gt;
       &lt;div class="modal-footer"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I have this video previews that I've done like this:</p>
  
  <pre><code>&lt;article hover class="thumb"&gt;
      &lt;div id="myModal" class="modal"&gt;
          &lt;div class="modal-content" id="ModalVideo"&gt;
              &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="images/thumbs/eminem.jpg" class="image" alt=""&gt;
      &lt;div class="video" id="ClickHere"&gt;&lt;video src="images/movie.mp4.mp4" autoplay muted class="videoPreview" id="Video1"&gt;&lt;/video&gt;&lt;/div&gt;
  &lt;/article&gt;
  &lt;article hover class="thumb"&gt;
      &lt;div id="myModal" class="modal"&gt;
          &lt;div class="modal-content" id="ModalVideo"&gt;
              &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;img src="images/thumbs/eminem.jpg" alt="" class="image" /&gt;
      &lt;div class="video" id="ClickHere"&gt;&lt;video src="images/Piruka - Tens De Intervir (Prod. Khapo) [VideoClip].mp4" autoplay muted class="videoPreview" id="Video2"&gt;&lt;/video&gt;&lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p>What I need is this: When the user clicks on the <code>&lt;div class="video"&gt;</code> inside the article I have to get the source of the video element inside it and pass it on to the source of video element inside the modal box.</p>
  
  <p>For that I've tried to do this in JavaScript:</p>
  
  <pre><code>&lt;script&gt;
  function Video()
  {
      var Source = $("#video1 source").attr("src");
      $('#ModalVideo video source').attr('src', Source);
      $("#ModalVideo video")[0].load();
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Which is working but only for the video element with the "video1" ID and I need it work for every video element. Is there a way to get the video source when the user clicks the div without having to attribute an id to every video element and use "onClick"?</p>
  
  <p>Thank you for your help, if you have any questions or suggestions please address them to me.</p>