JQuery - Function applying only for first element with class-CodePudding

I'm trying to update a modal & video attributes on button click.

It works well but the problem is that it only apply this when i click on the first button ( first element with the class videoBtn ), i want it to be applied on all other buttons with the same class

here is my code

$(".videoBtn").click(function(){
        $("#video").attr('src',$(".videoBtn").data('src'));
        $(".modal").attr('id', $(".videoBtn").data('target').substring(1));
      });

CodePudding user response：

You are not using value of currently clicked element, but first with class, you should use $this instead of $('.videoBtn')

$(".videoBtn").click(function(){
   $("#video").attr('src',$(this).data('src'));
   $(".modal").attr('id', $(this).data('target').substring(1));
});

CodePudding user response：

$(".videoBtn").each(function(){
  $(this).on('click', function() {
    $("#video").attr('src',$(".videoBtn").data('src'));
    $(".modal").attr('id', $(".videoBtn").data('target').substring(1));
  })
})