モーダルウィンドウ内で表示されるメインの画像を正しく切り替えたい

前提

お世話になっております。
ワードプレスで作成したページに、複数のモーダルウィンドウを実装しました。
モーダルウィンドウ内ではメイン画像とサムネイル画像、説明文が表示されます。
サムネイル画像をクリックするとメイン画像に表示されます。
モーダルウィンドウ、メイン画像切り替えにはどちらもjQueryを使用しています。
画像や説明文はそれぞれカスタムフィールドです。

実現したいこと

モーダルを開いたら決められたメインの画像を表示して欲しい。

発生している問題

モーダル内でサムネイルをクリックするとメイン画像は切り替わるが、別のモーダルウィンドウに移動しても直近でメインに表示されていた画像が依然としてある。

該当のHTML

	<div class="modal js-modal" id="post-<?php the_ID(); ?>">
		<div class="modal__bg js-modal-close"></div>
		<div class="modal__content">
			<p class="item-ttl sponly"><?php echo the_field('name');?></p>
			<div class="flex">
			<div class="main-img mainImg">
				<img class="" src="<?php echo the_field('ba-img');?>" alt="<?php the_title();?>の画像">
			</div>
			<div class="item">
				<p class="item-ttl pconly"><?php echo the_field('name');?></p>
				    <ul class="img-box subImg">
                        <li><img class="current" src="<?php echo the_field('ba-img');?>" alt="<?php the_title();?>の画像"></li>
                        <li><img class="" src="<?php echo the_field('img1');?>" alt="<?php the_title();?>の画像"></li>
                        <li><img class="" src="<?php echo the_field('img2');?>" alt="<?php the_title();?>の画像"></li>
                        <li><img class="" src="<?php echo the_field('img3');?>" alt="<?php the_title();?>の画像"></li>
					</ul>
					<p><?php echo the_field(‘main-text');?></p>
				</div>
			<a class="js-modal-close" href="">×</a>
			</div>
		</div><!--modal__inner-->
	</div><!--modal-->

該当のjQuery

●モーダル
<script>
$(function(){
	$('.js-modal-open').each(function(){
		$(this).on('click',function(){
			var target = $(this).data('target');
			var modal = document.getElementById(target);
			$(modal).fadeIn();
			return false;
		});
	});
	$('.js-modal-close').on('click',function(){
		$('.js-modal').fadeOut();
		return false;
	});	
});
</script>

●画像切り替え
<script>
 $(function(){
        $('.subImg img').on('click',function(){
            //mainに切り替えるimgのsrc取得
            img = $(this).attr('src');
            //currentクラス付け替え
            $('.subImg li').removeClass('current');
            $(this).parent().addClass('current');
            //fadeOutできたらsrc変更してfadeIn
            $('.mainImg img').fadeOut(50, function() {
                $('.mainImg img').attr('src', img).on('load', function() {
                     $(this).fadeIn();
                })
           })
        });
    });
</script>

該当のCSS

.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
	z-index: 22;
}
.modal__bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    background: #fff;
    left: 50%;
    padding: 40px;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 60%;
	overflow: scroll;
}
.modal__content .js-modal-close{
	position: absolute;
	right: 20px;
	top: 20px;
	font-size: 40px;
	color:#b69a65;
}
.modal__content .flex{
	display: flex;
	align-items: flex-start;
}
.modal__content .item{
	padding-left: 30px;
	width: 70%;
}
.modal__content .flex .main-img {
	width: 30%;
}
.modal__content .flex .main-img img{
	width: 100%;
}
.modal__content .item-ttl {
	border-bottom: 1px solid #b69a65;
	padding-bottom: 20px;
	margin-bottom: 30px;
	font-size: 2.4rem;
}
.modal__content .img-box{
	margin-bottom: 30px;
	display: flex;
	list-style: none;
}
.modal__content .img-box li{
	max-width: 131px;
	margin-left: 10px;
	cursor: pointer;
}

メインの画像はそれぞれのモーダルで決まっており（ba-img）、モーダルを開いたらメイン画像は決められたものを表示してほしいのですがそれがうまくいきません。何かお気付きの点があればご教授いただければと思います。
初めての質問のためお見苦しい点があるかと思います。不足している情報などありましたらご指摘ください。どうぞよろしくお願いいたします。