Управление плеером JS

Есть такой код

{% block content %}
    <div class="body-grid">
        {%for videos in video %}
    <span>
            <a id="play">
                <video id="video-player" class="video-window" poster="/static/contact.JPG">
                    <source  src="{{ videos.video.url }}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
                </video>
            </a>
    </span>
    {%endfor%}
    </div>
{% endblock content %}

Где через videos.video.url выдает несколько видео из бд ссылок. Код JS

document.querySelector("#play").onclick = play;
let videos;
// let display;

videos = document.querySelector("#video-player")

function play() {
    if (videos.paused){
       videos.play()
    } else {
        videos.pause()
    }

}

Проблема в том, что управлять получается только первым видео, всеми остальными которые отображаются на странице, управлять не получается. Что нужно исправить?