How to Apply Same Jquery to Elements with Unique IDs Added Through CMS Over Time?

I’m building a page that currently contains a few videos and more will be added over time through our CMS (Craft). The container div for each video will have a unique ID, as below:

<div id="video-1"></div>
<div id="video-2"></div>
<div id="video-3"></div>

Every time one of the divs is clicked, I want to run some Jquery. It is the same base Jquery but I want it to only run for the unique video that is clicked, so it should be tied to the ID.

The challenge is – I don’t want to have to go to our javascript file and manually add a new selector to run the function(s) each time we add a video. I would like the Jquery to work for each new video that is added through the CMS, without any extra steps. Assume that each video’s ID will increase by as a new one is added.

Here is an example of the Jquery I’m working with:

$('#video-1').on('click', function() {
  $('#video-1').css('background', 'none');
  $('#video-1').css('display', 'block');
  $('#video-1').css('position', 'static');
  $('iframe').css('display', 'block').attr('src', function() {
    return edTalksAutoPlay();
  });
});

How / is there a way to achieve what I’m looking to do? Thanks!

The easiest way to achieve this is to group the elements together. You can do that either by adding a class to them, or selecting them by a parent element, eg. #parent > div.

From there you can use the this keyword to refer to the element that raised the event within the handler. I would also strongly suggest you use pre-defined CSS classes to style the elements and use addClass()/toggleClass() to amend them. Something like this:

$('.video').on('click', function() {
  $(this).toggleClass('active').prop('src', function() {
    return edTalksAutoPlay();
  });
});
.active {
  background: none;
  display: block;
  position: static;
}
<div id="video-1" class="video"></div>
<div id="video-2" class="video"></div>
<div id="video-3" class="video"></div>

Finally, note that div elements do not have a src attribute – although I assume this was just an oversight when simplifying the HTML in your question.

When jQuery invokes an event handler, it arranges for this to be bound to the DOM element involved. Thus, $(this) in the event handler will always give you a jQuery object for the element involved with the event.

$('[id^=video]').on('click', function() {
  $(this).css('background', 'none');
  $(this).css('display', 'block');
  $(this).css('position', 'static');
  $(this).css('display', 'block').prop('src', function() {
    return edTalksAutoPlay();
  });
});