Всплывающее окно windows закрывается при нажатии кнопки переключения. Нужно выдвинуть всплывающее окно при нажатии кнопки, когда она уже открыта

Question

Используя jQuery пользовательский интерфейс, перетаскиваемый, у меня есть всплывающее окно windows, которое переключается при нажатии кнопок. В настоящее время, если вы нажимаете кнопку, она закрывает всплывающее окно, я хотел бы отключить это, так что если вы нажмете кнопку, это просто выведет окно вперед. Они также, похоже, не загружаются поверх остальных, последнее нажатие всплывающего окна останется поверх остальных.

Пример HTML для одной из кнопок

<div class="elementor-element elementor-element-10868ff4 elementor-widget elementor-widget-image" data-id="10868ff4" data-element_type="widget" id="music" data-widget_type="image.default">
                <div class="elementor-widget-container">
                    <div class="elementor-image">
                                        <img width="500" height="500" src="https://ellislanding.garywestjr.com/wp-content/uploads/2020/04/MUSIC-CD.png" class="attachment-full size-full" alt="" srcset="https://ellislanding.garywestjr.com/wp-content/uploads/2020/04/MUSIC-CD.png 500w, https://ellislanding.garywestjr.com/wp-content/uploads/2020/04/MUSIC-CD-300x300.png 300w, https://ellislanding.garywestjr.com/wp-content/uploads/2020/04/MUSIC-CD-150x150.png 150w" sizes="(max-width: 500px) 100vw, 500px">                                         </div>
                </div>
                </div>

.popup-window {
    background-color: #f1f1f1;
    position: absolute;
  top : 10%;
  left : 20%;
    z-index: 100;
    text-align: center;
  border: 1px solid black;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
  overflow: hidden;

}

.popup-header {
  font-family: PixelArial;
    letter-spacing: 2px;
    padding: 5px;
    cursor: move;
    z-index: 10;
    background-color: #ececec;
    color:black;
    border-bottom: 1px solid #000;
    box-shadow: 2px 2px 0px #fff inset;

}

.close {
    margin: 0;
    position: absolute;
    cursor: pointer;
}

  jQuery(document).ready(function($) {
    if ($(window).width() > 768) {
      $(".popup-window").draggable({
        iframeFix: true,
        stack: ".popup-window",
        distance: 0,
        containment: "#containment-wrapper",
        //      containment: 'parent',
        scroll: false,
        handle: ".popup-header"
      });
    } else {
      $(".popup-window").draggable({
        stack: "popup-window",
        distance: 0,
        containment: "#containment-wrapper",
        scroll: false,
        handle: ".popup-header"
      });
    }
  });

  var socials = $("#socialsdiv");
  $('#socials').on('click', function() {
    socials.appendTo('.elementor');
    socials.toggle();
  });

  var video = $("#videodiv");
  $('#video').on('click', function() {
    video.appendTo('.elementor');
    video.toggle();
  });

  var music = $("#musicdiv");
  $('#music').on('click', function() {
    music.appendTo('.elementor');
    music.toggle();
  });

  var chat = $("#chatdiv");
  $('#chat').on('click', function() {
    chat.appendTo('.elementor');
    chat.toggle();
  });

  var signup = $("#signupdiv");
  $('#signup').on('click', function() {
    signup.appendTo('.elementor');
    signup.toggle();
  });

  $('.close').on('click', function() {
    $(this).parents('.popup-window').hide()
  });
});