Jquery: eq () не работает для нескольких страниц

Question

Я работаю с laravel, и у меня есть этот код в моем модальном представлении (всплывающее окно):

<ul class="slick3-dots" style="" role="tablist">
<li class="" role="presentation">
<img src="http://localhost:8000/image.jpg">
<div class="slick3-dot-overlay"></div>
</li>
<li role="presentation" class="">
<img src="http://localhost:8000/image2.jpg">
<div class="slick3-dot-overlay"></div>
</li>
<li role="presentation" class="slick-active">
<img src="http://localhost:8000/image3.jpg">
<div class="slick3-dot-overlay"></div>
</li>
</ul>

В моем сценарии я написал это, чтобы выбрать 3 изображения в li вчтобы изменить их источник, когда всплывающее окно активно:

$('.js-show-modal1').on('click',function(e){
e.preventDefault();
var main1, main2, main3;
 main1 = $('ul.slick3-dots li:eq(0) img');
 main2 = $('ul.slick3-dots li:eq(1) img');
 main3 = $('ul.slick3-dots li:eq(2) img');
$('.js-modal1').addClass('show-modal1');
 main1.attr('src', '{{ Config::get('app.url') }}/' + image);
 main2.attr('src', '{{ Config::get('app.url') }}/storage/' + images[0]);
 main3.attr('src', '{{ Config::get('app.url') }}/storage/' + images[1]);
});

Моя проблема в том, что, когда я включаю свое модальное представление в свой индекс, все работает отлично;изображения из хранилища загружаются, но не включаются в другое представление.