Помогите с модальным окном

Пропал программист, а решение требуется. Проблема в том, что в единственном числе оно работает без проблем. А как сделать якорь, что бы таких окон можно было открывать с разным контентом — хз...

Есть следующий фаил js ---------

modal_security
$(document).ready(function() {
var btnOpenModal = $('.btn_open');
var btnClose = $('.close_btn');
var modalOverlay = $('#modal-overlay');
var $body = $('body')

btnClose.on('click', function(){
modalOverlay.addClass('closed');
$body.css('overflow', 'auto');
});
btnOpenModal.on('click', function(){
modalOverlay.removeClass('closed');
$body.css('overflow', 'hidden');
});
});


и код--------------------
span class="btn_open">open_modal</span>

<div class="modal" id="form-message">
<span class="modal__close"></span>
<div class="modal__content"></div>
</div>

<div class="modal-overlay closed" id="modal-overlay">
<div class="modal-overlay-closed close_btn"></div>
<div class="security" id="modal_security">
<span class="modal__close close_btn"></span>
<div class="security-content">
<div class="security-content-head">
<h4>Заголовок всплывающего окна</h4>
</div>
<div class="security-content-pic">
<img src="img/zaglushka.jpg" alt="">
</div>
<div class="security-content-body">
<a class="security_link" href="#">
<img src="img/zaglushka-link.jpg" alt="">
<span>Краткое описание задачи проекта</span>
</a>
<a class="security_link" href="#">
<img src="img/zaglushka-link.jpg" alt="">
<span>Cсылка на систему</span>
</a>
<button class="security_btn">Оставить заявку</button>
</div>
<div class="security-content-pic">
<img src="img/zaglushka.jpg" alt="">
</div>
<button class="modal__close--bottom close_btn"></button>
</div>
</div>
</div>

На одной странице нельзя использовать одинаковые идентификаторы как Попробуйте заменить на класс