Conflict in code for modal windows, how to fix?

Question

JavaScript

Hello)
There are three buttons on the site page that cause a modal window: In the menu, in the product description and in the footer.
The matter is that between three scripts for different windows there is a conflict and that window which is the last is displayed. Instead of a thousand words, I will insert pieces of code)
Code of the first application:

<button id="Launch-modal__BTN" href="#">Заказать звонок!</button>
<div id="Menu__request" class="modal">
<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="Menu__request_heading">
      Заказать звонок
    </div>
    <form class="Menu__request_form" id="form" action="sender.php">
        <input type="hidden" name="project_name" value="Сайт “СвятоГор”">
<input type="hidden" name="admin_email" value="sekret)">
<input type="hidden" name="form_subject" value="С заявки на звонок">
        <input type="text" name="Имя клиента" placeholder="Ваше имя и фамилия" required>
        <input type="tel" name="Телефон" placeholder="Ваш телефон" required>
        <input name="sendMail" type="submit" class="Submit__BTN">
      </form>
  </div>
</div>
<script>// Get the modal
var modal = document.getElementById('Menu__request');

// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}</script>
    </div>
  </div>

,
second application:

<div class="dostavka__button">
            <button id="Launch-modal__BTN6">Заказать!</button>
            <span class="certified">Товар сертифицирован</span>
          </div>
          <div id="Menu__request6" class="modal">
<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="Menu__request_heading">
      Заказать ОПАЛУБКУ ПЕРЕКРЫТИЙ
    </div>
    <form class="Menu__request_form" id="form" action="sender.php">
<input type="hidden" name="project_name" value="Сайт “СвятоГор”">
<input type="hidden" name="admin_email" value="[email protected]">
<input type="hidden" name="form_subject" value="С страницы Рамных лесов">
        <input type="text" name="Имя клиента" placeholder="Ваше имя и фамилия" required>
        <input type="tel" name="Телефон" placeholder="Ваш телефон" required>
        <input type="tel" name="email" placeholder="Ваш email" required>
        <textarea placeholder="Сообщение.." name="Сообщение"></textarea>
        <input name="sendMail" type="submit" class="Submit__BTN">
      </form>
  </div>
</div>
<script>// Get the modal
var modal = document.getElementById('Menu__request6');

// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN6");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}</script>
        </div>
      </div>      
    </div>

Third application in the footer:

<div class="Footer__phone_number">
        [phone]
        </div> <br>
            <a href="#footer" id="Launch-modal__BTN2">Заказать звонок!</a>
    </div>
    <script>// Get the modal
var modal = document.getElementById('Menu__request');

// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}</script>

Here's what pops up when you click any "modal" button if you do not modify anything:

And this is what happens if you comment out the script for the button in the footer:

What to do, help!

Answer 1

It is necessary not to produce the same code for each modal. Write your code like this:
1. Broadcast to all elements with class X click event
2. Click event calls the function of opening the desired modal. The required modal can be defined in paragraph 1.
3. On the elements intended to close the modal, you need to hang an event that calls the closing function of the current modal. Which modal to close can be found at the time of the event bubbling for closing