How to choose access to the desired element?

Question

JavaScript

Click on the image to open the window.

<div class="youtube-player" data-id="bHQqvYy5KYo" playoption="autoplay">
    <div>
         <img id="playVideo" class="youtube-thumb" src="//i.ytimg.com/vi/bHQqvYy5KYo/hqdefault.jpg">
         <div class="play-button"></div>
    </div>
</div>

The above code is automatically generated from

<div class="youtube-player" data-id="bHQqvYy5KYo" playOption="autoplay"></div>

The problem is that there is more than one video on the page and when I write:

$('#myModal').on('shown.bs.modal', function () {
     document.getElementsByID("playVideo").click(); 
});

That, of course, opens all the videos on the page (including hidden ones, for which popup did not work), and I need to open exactly the one that is now open in popup.
I understand why all the videos open, I can't figure out how to build the path to the object I need (the picture with the link).
Most likely there is something obvious here, but I can't point it out.
Please tell me how it can be implemented or in which direction to dig.
Thank you.

Answer 1

$(".youtube-player #playVideo").click();
In general, it’s not good that you have the same id for elements.

Answer 2

The question is closed. For anyone interested, here's what worked for me.
$(this).find('#playVideo').click();