Как обратиться к элементу, сгенерированному в одном js из другого?

Задача: получить возможность обращаться по клику, к каждому отдельно сгенерированному элементу с id = "video".

Я в момент загрузки страницы, js скриптом в цикле создаю элементы:

const parent_widget = document.getElementById("video_block");

let create_widget_video = function() {    
    file.forEach(function(url) {
        var div = document.createElement("div");
        div.className = "video";

        parent_widget.appendChild(div);
    });

Элементы создаются, с этим нет проблем. Вместе с этим, подгружается js, который по моей логике, должен обращаться к элементу по его id и выполнять определенную функцию:

$(document).ready(function() {
    $('.video').click( function(event){ ...

Но этого не происходит, я новичок в js и если правильно понимаю, то 2 скрипт просто не видит элементы сгенерированные первым скриптом и не может найти элементы по id в исходном html. Вопрос - как я могу обращаться к каждому созданному в 1 скрипте элементу? наверное можно прикрутить функцию прямо внутри цикла первого скрипта.. но это уже высшая магия, мне нужна ваша помощь.

p.s. Если я в html, добавляю пару тестовых элементов:

<div id="video_block">
   <div class="video" style="border: 1px solid #000;"></div>
   <div class="video" style="border: 1px solid #000;"></div>
</div>

С ними все отрабатывает как надо, но 2 скрипт не работает для сгенерированных элементов, хотя по структуре как я могу видеть, они все одинаковы: