Index of object and play next with youtube api

Question

I am using the youtube api to search for youtube videos. The videos will then be displayed on #searchBar with the video id ex. NJNlqeMM8Ns as data-video. I get the video id by pressing on a img:

<img data-video = "{{videoid}}" src = "bilder/play.png" alt = "play" class = "knapp" width = "40" height = "40">

Which in my poorly understanding of javascript becomes (this). When I search for videos I will get more than one result which means that I will get more than one img tag.

In this case I want to play the next song when the first one is finished. I tried to get the index when I pressed on my img tag:

$(".knapp").click(function(){
    var index = $(".knapp").index(this);
    alert(index);
});

However, when I alerted the index after the video was finshed I always got the value 0 back.

So I thought I could do something like this:

function onPlayerStateChange(event) {
   if (event.data == YT.PlayerState.ENDED){
    playNext();
   }
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).attr('data-video');
playVideo();
});

function playVideo(){
var video_id = player.current_video;
player.loadVideoById(video_id, 0, "large");
}

function playNext(){
var player.current_videon = **$(this + 1).attr('data-video');**
var next_id = player.current_videon;
player.loadVideoById(next_id, 0, "large");
}

But I'm not sure how to make it work, as you can see in the bold section, can I solve my problem like this or do I need another approach?

Edit: With some research I found out that I need to set the value of the current video being played and also efter the video was done playing I add this number by 1. However even if it did make the next video play, I was unable to chose which song I wanted anymore...

    function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED){
    player.current_video++;
    playVideo();
}
}
var player = document.querySelector('iframe');
function onYouTubeIframeAPIReady() {
 player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '40mSZPyqpag',
playerVars: {rel: 0},
events: {
  'onStateChange': onPlayerStateChange
}
});
player.current_video = 0;
}

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).index();
alert(player.current_video);
playVideo();
});

function playVideo(){
var video_id = $('[data-video]').eq(player.current_video).attr('data-video');
player.loadVideoById(video_id, 0, "large");
}  

Answer 1

I got a suggestion to get player.current_video by the closest li index, so I made an update to my data-video img tag.

<li class = liItem>
    <img data-video = "{{videoid}}" src = "bilder/play.png" alt = "play" class = "knapp" width = "40" height = "40">
</li>

Then I changed the index on my click function in my edited example:

$('#searchBar').on('click', '[data-video]', function(){
player.current_video = $(this).closest('li').index();
playVideo();
});

With this new fuction I was able to chose and play the next song! Shoutout to @cale_b for providing me with the .closest('li') suggestion.

Answer 2

Here is a working PEN (click to RUN)

The solution is based on a global currentSongIndex index, without facilitating next()

var currentSongIndex = null;

$(".knapp").click(function () {
    var index =  $(this).attr('data-video');
    playVideo(index);
});

function playVideo(index) {
    console.log("Playing song INDEX: " + index);
    currentSongIndex = index;
    playNext();
} 

function playNext() {
    currentSongIndex++;
    let nextSongIndex = $('img[data-video="' + currentSongIndex + '"]').attr('data-video');
    console.log("Next song INDEX: " + nextSongIndex);
    if(typeof nextSongIndex != "undefined") {
        playVideo(nextSongIndex);
    } else {
        console.log('end of list... you can play from index 1 or whatever....');
    }
}