Play/pause toggle for multiple videos

Question

I searched the whole day for a result like this and tried tons of possibility's, but without any success so far.

For a new website I want to make a video playlist with 3 videos, however when I click on my play/pause toggle, all the toggles are changing from play to pause instead of just one.

I want to prevent working in my code with ID toggle1, toggle2, toggle3 and so on. I want to create a class with buttons, which I can put on every video. When I click on the play buttons of the first video, the buttons need to switch only for the first video. The 2nd and 3th video remains on pause.

Any help would be greatly appreciated!

$('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
        $(this).removeClass('playvideo');
        $('.play').css({
            "visibility": "hidden",
        });
        $('.pause').css({
            "visibility": "visible",
        });
    } else {
        $(this).addClass('playvideo');
        $('.play').css({
            "visibility": "visible",
        });
        $('.pause').css({
            "visibility": "hidden",
        });
    }
});

<video id="my-video-1" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-2" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

<video id="my-video-3" class="video-js" preload="auto" width="1088px" height="612" data-setup {}">
<source src="https://youtube.com" type="video/mp4"/>
</video>

<div class="player-buttons">
     <a class="play-toggle" class="video-play">
     <img class="pause" src="img/play-btn.svg" alt="pause button">
     <img class="play" src="img/play-btn2.svg" alt="play button">
     </a>
</div>

Answer 1

To prevent all the buttons from toggling when one button is clicked, adjust your code as follows. Also note that your HTML isn't valid - you use 2 class attributes for one element. Instead of <a class="play-toggle" class="video-play"> just write <a class="play-toggle video-play">

 $('.play-toggle').click(function () {
    if ($(this).hasClass('playvideo')) {
       $(this).removeClass('playvideo');
       $(this).find('.play').css({
        "visibility": "hidden",
       });
       $(this).find('.pause').css({
        "visibility": "visible",
    });
    } else {
       $(this).addClass('playvideo');
       $(this).find('.play').css({
        "visibility": "visible",
       });
       $(this).find('.pause').css({
        "visibility": "hidden",
       });
    }
});