Как заставить modern script срабатывать в нужном порядке?

Как заставить modern script срабатывать в нужном порядке?

На странице есть два скрипта , один на Jquery анимирует прокрутку картинок. Другой на modern Js формирует из базы набор картинок для анимации. Куда бы не вставлял modern Js он срабатывает  только после JQ . и почему то debugger не работает в MJS . Да и QJ  обернут в $(window).load(function() он по идее должен выполняться только после формирования страницы  и загрузки картинок.

<script type="text/babel" >

// скрипт для добавления картинок . когда заработает вставлю переменные из базы картинки и ссылки на билеты.


var container = document.getElementById ('con');
//console.log(container);


for ( let j=0 ; j<=6 ; j++){

let item = document.createElement('div');

container.appendChild(item);
//console.log(item);

item.classList.add ('content');
}


// -добавляем в div с classs= 'content' теги a , img

var parentDOM = document.getElementById('con');

for ( let i = 0; i <= 6; i++){

let item = document.createElement('div');
let item1 = document.createElement('a');
let item2 = document.createElement('img');

var tables =parentDOM.getElementsByClassName("content")[i];

item.appendChild(item1);
item1.appendChild(item2);
tables.appendChild(item);

item1.classList.add ('bilet_a');
item2.classList.add('bilet_img');


}


let blocks = document.getElementsByClassName( 'bilet_a' );

for( let i = 0; i < blocks.length; i++){

// проходим циклом по всем элементам массивоподобного объекта

blocks[i].href = 'javascript: document.location.href = "https://forms.yandex.ru/u/5e9edbc5f89fbe1729a5da79/";';
}


let img_blok = document.getElementsByClassName( "bilet_img" );
for( let i = 0; i < img_blok.length; i++){
// проходим циклом по всем элементам массивоподобного объекта
img_blok[i].classList.add ('thumb');
img_blok[i].alt="Билет" ;
img_blok[i].src = 'img/img1.jpg';

}



</script>