اشکال در ترتیب خواندن ویدیواز mysql با استفاده از جاوااسکریپت و لاراول

از mysql دو تا row رو فراخونی میکنم که هر کدام شامل یک ویدیوی خاص میباشد.
انتظار دارم با زدن روی دکمه هایی که ایجاد کردم هر دو ویدیو به ترتیب نمایش داده شوند اما عملا ویدیوی row آخر (row دوم)رو بعد از کلیک روی
هر کدام از کلید ها نمایش میدهد. به من کمک کنید لطفا( به جای اینکه هر دو ویدیو متفاوت را نشان بدهد دو تا ویدیوی تکراری نشان میدهد)
کد html:

<video id="myVid" width="320" height="240" controls>
        <source src="" type="video/mp4">
</video>

@foreach($q1 as $p)
            <button onclick="playVideo()">{{$p->id}} </button> 
@endforeach

کد جاوااسکریپت:
<script>

    function playVideo() {
        var myVideo = document.getElementById("myVid");
        myVideo.pause();

        var source = document.getElementsByTagName("source")[0];
        source.setAttribute("src", "{{asset($p->link)}}");

        myVideo.load();
        myVideo.play();
    }

</script>