Playing a specific video file when there are multiple buttons, videos

Question

Problem

I have four divs each with their own video file and button.

Right now, it is coded in a way that it only works with one file, but unfortunately not all of them.
I've tried using .each and using the index of the element, but I kept running into an issue where .pause() was not a function

Codepen

https://codepen.io/onlyandrewn/pen/NBvPjx

Objective

Clicking on a group's button should play that group's specific video file

scripts.js

    $(function(){

   function playVideo() {

            var video = $(".video--inline")[0];

            if (video.paused) {
                video.play();
                video.muted = false;
            } else {
                video.pause();
                video.muted = true;
            }

            // Loads the clip again, so that it reverts back to the poster image
            video.addEventListener("ended", function(){
                video.load();

                $("button").find("i").removeClass("fa-pause");
                $("button").find("i").addClass("fa-play");
            });
        }

        $("button").click(function(){
            playVideo();
        });
    });

index.html

Kosh · Accepted Answer

Pass click event to your playVideo function then target video like this:
var video = $(e.target).closest('.group').find('video')[0];

    $(function(){

   function playVideo(e) {

            var video = $(e.target).closest('.group').find('video')[0];

            if (video.paused) {
                video.play();
                video.muted = false;
            } else {
                video.pause();
                video.muted = true;
            }

            // Loads the clip again, so that it reverts back to the poster image
            video.addEventListener("ended", function(){
                video.load();

                $("button").find("i").removeClass("fa-pause");
                $("button").find("i").addClass("fa-play");
            });
        }

        $("button").click(playVideo);
    });

.group {display:inline-block; width:20vw}
video {width:20vw}

Update We're passing a function name as a parameter to the click handler:
$("button").click(playVideo)
So playVideo will be called on click and the click Event object will be passed to playVideo as a parameter (we called it e): function playVideo(e).
e.target is the clicked element (button).

Then we're traversing from the button to the corresponding video.