同じクラス名で複数のモーダルを実装

完成形はこちら

HTMLはこちら

<div id="sampleBox_210321">
	<div class="modalBox">
		<div class="modalLeftBox">
			<dl>
				<dt>モーダルボックス</dt>
				<dd class="js-modalOpen" data-target="m01">モーダル１</dd>
				<dd class="js-modalOpen" data-target="m02">モーダル２</dd>
				<dd class="js-modalOpen" data-target="m03">モーダル３</dd>
			</dl>
			<!--1-->
			<div id="m01" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル１です</h2>
					<p>こちらがモーダル１です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
			<!--2-->
			<div id="m02" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル２です</h2>
					<p>こちらがモーダル２です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
			<!--3-->
			<div id="m03" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル３です</h2>
					<p>こちらがモーダル３です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
		</div>
		<div class="modalRightBox">
			<dl>
				<dt>モーダルボックス</dt>
				<dd class="js-modalOpen" data-target="m04">モーダル４</dd>
				<dd class="js-modalOpen" data-target="m05">モーダル５</dd>
				<dd class="js-modalOpen" data-target="m06">モーダル６</dd>
			</dl>
			<!--4-->
			<div id="m04" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル４です</h2>
					<p>こちらがモーダル４です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
			<!--5-->
			<div id="m05" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル５です</h2>
					<p>こちらがモーダル５です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
			<!--6-->
			<div id="m06" class="modalArea js-modalArea">
				<div class="modalBg js-modalBg"></div>
				<div class="modalCont">
					<h2 class="h2">モーダル６です</h2>
					<p>こちらがモーダル６です。</p>
					<div class="demoBtn">
						<span class="js-modal-close">閉じる</span>
					</div>
				</div>
			</div>
			<!--//-->
		</div>
	</div>
</div>

CSSはこちら

▼ PCはこちら

#sampleBox_210321 .modalBox {
	display: flex;
	justify-content: space-between;
}

#sampleBox_210321 .modalBox .modalLeftBox,
#sampleBox_210321 .modalBox .modalRightBox {
	width: 49%;
}

#sampleBox_210321 .modalBox .modalLeftBox dl dt,
#sampleBox_210321 .modalBox .modalRightBox dl dt {
	background-color: skyblue;
	padding: 10px;
	font-size: 24px;
}

#sampleBox_210321 .modalBox .modalLeftBox dl dd,
#sampleBox_210321 .modalBox .modalRightBox dl dd {
	border-bottom: 1px dotted #000;
	padding: 10px;
	background-color: #eee;
	cursor: pointer;
	transition: .3s;
}

#sampleBox_210321 .modalBox .modalLeftBox dl dd:hover,
#sampleBox_210321 .modalBox .modalRightBox dl dd:hover {
	opacity: .6;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea,
#sampleBox_210321 .modalBox .modalRightBox .modalArea {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalBg,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalBg {
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalCont,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalCont {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 3%;
	max-width: 850px;
	max-height: 600px;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalCont > *:first-child,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalCont > *:first-child {
	margin-top: 0;
}

▼ spはこちら

#sampleBox_210321 .modalBox {
	display: flex;
	flex-wrap: wrap;
}

#sampleBox_210321 .modalBox .modalLeftBox,
#sampleBox_210321 .modalBox .modalRightBox {
	width: 100%;
}

#sampleBox_210321 .modalBox .modalLeftBox dl dt,
#sampleBox_210321 .modalBox .modalRightBox dl dt {
	background-color: skyblue;
	padding: 10px;
	font-size: 20px;
}

#sampleBox_210321 .modalBox .modalLeftBox dl dd,
#sampleBox_210321 .modalBox .modalRightBox dl dd {
	border-bottom: 1px dotted #000;
	padding: 10px;
	background-color: #eee;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea,
#sampleBox_210321 .modalBox .modalRightBox .modalArea {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalBg,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalBg {
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalCont,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalCont {
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: 2;
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 20px;
	max-width: 90%;
	max-height: 300px;
}

#sampleBox_210321 .modalBox .modalLeftBox .modalArea .modalCont > *:first-child,
#sampleBox_210321 .modalBox .modalRightBox .modalArea .modalCont > *:first-child {
	margin-top: 0;
}

#sampleBox_210321 .modalBox .modalRightBox {
	margin-top: 30px;
}

jsはこちら

$(function() {
	//eachメソッドで「js-modalOpen」要素を取得。
	$('.js-modalOpen').each(function() {
		//「this」でクリックした「js-modalOpen」を取得。発火。
		$(this).on('click', function() {
			//dataメソッドでクリックした「js-modalOpen」の「data-target」属性を取得。
			var target = $(this).data('target');
			//target（取得したdata-target）と合致する要素（ID）を取得して「modal」に格納。
			var modal = document.getElementById(target);
			//合致した要素をfadeIn表示。
			$(modal).fadeIn();
			return false;
		});
	});
	//「js-modal-close」「js-modalBg」をクリックされたら発火。
	$('.js-modal-close,.js-modalBg').on('click', function() {
		//「js-modalArea」をfadeOut。
		$('.js-modalArea').fadeOut();
		return false;
	});
});