Как переписать попап, чтобы можно было добавлять несколько модальных окон?

Question

[testkeyc]

let modal = document.getElementById('modal');
let link = document.getElementById("form__link");
let span = document.getElementsByClassName("modal__span")[0];


link.onclick = function() {
    modal.style.display = "block";
}

span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

<span class="s-dark__span" id="form__link">Щелк</span>

	<div id="modal3" class="modal">
		<div class="modal__text">
			<div class="modal__span3">
				<i class="fas fa-times"></i>
			</div>
			<p>
				Lorem ipsum.
			</p>
		</div>
	</div>

.modal
	display: none
	position: fixed
	width: 100%
	height: 100%
	z-index: 1
	padding-top: 70px
	left: 0
	top: 0
	overflow: auto
	&__span
		float: right
		margin-top: -10px
		cursor: pointer
	&__text
		color: $white
		width: 50%
		margin: auto
		padding: 20px
		padding-bottom: 5px
		cursor: pointer

Написал попап окно. Подскажите, что нужно поправить, чтобы можно было создать еще одно окно без дублирования js кода? В js новичок, спасибо за ответы))

Comments

[Алексей]

Написать функцию/и и использовать их вместо дублирования кода, передавая элементы как параметры?
Щелк ваш же вопрос.

[testkeyc]

Алексей, я когда добавляю код в функции, то он перестает работать. Если не сложно, то покажите мне на примере как это должно быть в данном случае

[Сергей Карвасарный]

testkeyc, как-то так и т.д и еще что-то не понятен последний кусок кода, зачем он ? window.click, почему сразу не нажимая на modal скрывать его.

let fun = e => {
  e.style.display = "block";
}

link.addEventListener('click', () => {
  fun(modal);
});