投稿一覧の非同期読み込み時に連番のクラス名やモーダル表示要素が出力されない

#仕様
wordpressでwp_queryによるループでカスタム投稿・カスタムタクソノミーの記事一覧を表示しています。
カード型記事一覧のうち、カードをひとつをクリックすると、モーダルウィンドウが出てきて、そこの詳細が表示されます。
記事一覧の2ページ目以降は通常のページャーではなく、jQueryプラグインのinfinite-scrollにて追加読み込みしています。

起きている問題

もっと見るボタンを押すと、
カード型の記事一覧は問題なく表示されます。

ただ、
モーダル表示用の要素が生成されず、

open=".media_list_"も
通常は、
open=".media_list_4"
open=".media_list_5"
open=".media_list_6"
と出るのですが、

もっと見るを押すと、
再び、open=".media_list_7"とクラス名が出てほしいのですが、
open=".media_list_4"になってしまいます。

まとめると
もっと見るとクリックしたときに
・モーダル表示用の要素を生成したい
・open=".media_list_$i"を連番で出したい
です。

ソースコード

php
1
2<?php
3$args = array(
4        'post_type' => 'product',
5        'taxonomy' => 'product_cat', 
6        'term' => 'shop',
7        'posts_per_page' => 3, 
8        'paged' => $paged
9    );
10    $wp_query = new WP_Query( $args );
11    if ($wp_query->have_posts()) : $i=4;
12        while ($wp_query->have_posts()) :  $wp_query->the_post();
13    ?>
14<!--カード型記事-->
15<div data-wow-delay="<?php echo $i ?>00ms" class="post-media2 wow fadeIn col-12 col-md-4 col-lg-4 mb-5" data-izimodal-open=".media_list_<?php echo $i ?>">
16    <div class="card img-thumbnail">
17    <div class="card-body text-center">
18        <p class="card-text text-left">hoge</p>
19    </div>
20    </div>
21</div>
22
23<!--モーダル表示用-->
24<div class="media_list_<?php echo $i ?>"　data-izimodal-group="group" data-izimodal-loop=true>
25<div class="iziModal-close"><a href="javascript:void(0)" data-izimodal-close=""><span></span><span></span></a></div>
26<?php $i++; endwhile; 
27    else: echo '記事がありません。';
28    endif; wp_reset_postdata(); ?>
29</div>
30
31
32<!--もっと見るのボタン-->
33<span class="next_posts_link1">
34    <?php next_posts_link(); ?>
35</span>
36
37<?php
38    global $paged;
39    if( empty( $paged ) ) $paged = 1;
40
41    global $wp_query;
42    $pages = $wp_query -> max_num_pages;
43    if( !$pages ) {
44        $pages = 1;
45    }
46    if( $pages != 1 && $paged < $pages ):
47 ?>
48
49<div class="scroll_wrap">
50<button class="view-more-button" type="button">もっと見る</button>
51<div class="scroller-status page-load-status" style="display:none;">
52    <div class="infinite-scroll-request"></div>
53    <p class="infinite-scroll-last mb-5">これ以上、製品はありません</p>
54    <p class="infinite-scroll-error mb-5">読み込むページがありません</p>
55</div>
56</div>
57
58<?php endif; ?>
59
60

wp_scriptにて読み込んでいるJS

jquery-1.12.4
infinite-scroll.pkgd.min.js
iziModal.min.js

php
1wp_script('infinite-scroll-js','https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js',true);
2wp_script('izimodal-js','https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.min.js',true);
3