Открытие одного модального окна при нажатии на разные кнопки?

Question

[Aleksandr Zakordonnyi]

Здравствуйте, у меня есть N количество кнопок в виде <a id="open"></a>, на эти кнопки я хочу повесить открытие модального окна (модальное окно с формой) и закрытие в не области его без кнопки закрытия, но работает оно только на одной кнопке. У меня есть кусок кода не могу понять как допилить?

<div class="modal" id="modal">
        <form action="#" class="modal-form" id="modal-form">
            <h2 class="modal-title">Оставьте свои контактные данные</h2>
            <span class="modal-desc">Мы свяжемся с Вами в ближайшее время</span>
            <input name="phone" type="tel" class="putPhone" placeholder="Номер телефона или номер WhatsApp" required>
            <input type="text" class="putName" name="name" placeholder="Ваше имя" required>
            <input type="text" class="putLink" name="name" placeholder="Ссылка на ваш проект (сайт или соц.сети)" required>
            <div class="inputItem">
                <input type="checkbox" name="checkme" id="agree" class="agree"> <p>Нажимая на кнопку «отправить», вы даете согласие на обработку своих персональных данных. <a href="#">Политика конфиденциальности</a></p>
            </div><!-- /inputItem -->
            <input type="submit" id="continue" class="btn" value="Отправить">
            <input type="hidden" name="formData" value="Заявка с сайта">
        </form>
    </div><!-- /modal -->

СSS (кусочек)

.modal.active {display: block;}
#open {cursor: pointer;}
.modal {
    display: none;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background: rgba(25, 25, 25, .5);
    padding: 0 50px;
    & .modal-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        transform: translateY(-35%);
        -webkit-transform: translateY(-35%);
        -moz-transform: translateY(-35%);
        -ms-transform: translateY(-35%);
        -o-transform: translateY(-35%);
        position: relative;
        min-width: 320px;
        max-width: 530px;
        min-height: 530px;
        max-height: 730px;
        padding: 35px;
        background: #FFFFFF;
        border-radius: 20px;
        margin: 0 auto;
        top: 35%;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
        @media(max-width: 800px) {
            padding: 15px;
        }
    }

И главное JS

$(function () {
    $('#open').click(function () {
      $('.modal').addClass('active');
      $('body').addClass('lock');
    });
});

$('.modal').mouseup(function (e) {
    let modalContent = $(".modal-form");
    if (!modalContent.is(e.target) && modalContent.has(e.target).length === 0) {
    $(this).removeClass('active');
    $('body').removeClass('lock');
    }
});

Comments

[Ankhena]

id в рамках страницы должен быть уникальным.
Так что поменяйте на класс.

[Aleksandr Zakordonnyi]

Ankhena,
Спасибо большое, а еще можете подсказать решение такой проблемы
Есть код плавной прокрутки (ниже), при клике по якорной ссылке срабатывает через раз вот этот кусок кода ( из вышеуказанного ) $('body').addClass('lock'); и этот $('body').removeClass('lock');, то есть добавляет через клик класс "lock" к body

Прокрутка

$('a[href*="#"]').on('click', function() {
	$('html, body').animate({
	  scrollTop: $($.attr(this, 'href')).offset().top - 100
	}, 1500);
	return false;
});