Как исправить всплывающее окно не отображается

Question

Я пытаюсь сделать всплывающее окно для приложения обмена сообщениями. Для тестирования я создал Dev Dir в качестве тестовой страницы, и всплывающее окно отображается и выводится правильно. Но в моем реальном веб-приложении оно не отображается и не выводится.

Информация, которая может вам понадобиться кнопка, которую я использую

<button type="button" class="btn btn-secondary" id="pop"><img src="https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png" style="height:30px;width:25px;"></button>

JS-скрипт, который обрабатывает все

<script>
            $(document).ready(function(){
                 $('#pop').popover({title: "<h5><img src='https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png' style='height:30px;width:25px;'> Giphy Gif <button type='button' class='close' id='closeGui' ><span aria-hidden='true'>&times;</span></button></h5>", content: "<h4 id='WTD'>Click On The Gif You Want to Send</h4><input id='searchBar' type='text'><button id='queryGiphy'>Search</button></div><div id='container'></div></div>", html: true, placement: "top", trigger: "manual"}); 
                $('#pop').click(function(event) {
                    $("#pop").popover('toggle');
                });
                $('#pop').on('shown.bs.popover', function(){
                    function searchGiphy() {
        var NewSearch = $("#searchBar").val();
        var search = NewSearch.split(' ').join('+');
        console.log('Searching W/ KeyWord:'+search);
                        $("#searchBar").val('');
                        $("#searchBar").hide();
                        $("#queryGiphy").attr("disabled", true);
                        $("#queryGiphy").hide();
                        $("#WTD").show();
                        $("#container").empty();
        var xhr = $.get("https://api.giphy.com/v1/gifs/search?q="+search+"&api_key=&limit=5");
                        xhr.done(function(data) {
                            for (var i = 0; i < data.data.length; i++){
                               $("#container").append("<img src='"+data.data[i].images.original.url+"' style='height:200px;width: 250.5px;'>");
                            }
                        });
            }               
                            $('exampleModalLong').click(function(event){
                                event.stopPropagation();
                            });
                            $("#container").on("click", "img", function (event) {
                               // var _target = event.target;
                                   var newSrc = $(event.target).attr('src');
                                   alert("<img src='"+newSrc+"'>")
                            });
                            $('#closeGui').click(() => {
                                $("#searchBar").val('');
                                $("#searchBar").show();
                                $("#queryGiphy").attr("disabled", false);
                                $("#queryGiphy").show();
                                $("#WTD").hide();
                                $("#container").empty();
                            });
                            $('#btnClose').click(() => {
                                $("#searchBar").val('');
                                $("#searchBar").show();
                                $("#queryGiphy").attr("disabled", false);
                                $("#queryGiphy").show();
                                $("#WTD").hide();
                                $("#container").empty();
                            });
                    document.getElementById("closeGui").addEventListener("click", () =>{
                        $("#pop").popover('hide');
                    });
                    document.getElementById("queryGiphy").addEventListener("click", () =>{
                        searchGiphy();
                    });
                    $('#searchBar').on('keypress',function(e) {
                            if(e.which == 13) {
                                searchGiphy();
                            }
                        });
                  });

            });
        </script>

Полный код (изменен)

<?php
include_once('Admin Script');

$servername = "localhost";
$username = "";
$password = "";
$dbName ="";
// Create connection
$connection = mysqli_connect($servername, $username, $password,$dbName);

// Check connection
if (!$connection) {
    die("Connection failed: " . mysqli_connect_error());
}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Reese's Puffs</title>
        <link rel="shortcut icon" href="" />
        <link rel="stylesheet" href="main.css">
           <meta charset="utf-8"/>
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
          <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
          <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
          <link rel="stylesheey" href="sec/nav-foot.css">
      <style>
          .navbar{
            margin-bottom:0;
            border-radius:0;
            background-color:#000000;
            color:#00EE00;
            padding:1% 0;
            font-size:1em;
            border:0;
          }
          .navbar-brand{
              float:left;
              min-height:55px;
          }
          footer {
              width:100%;
              background-color:#000000;
              padding:3%;
              color:#fff;
          }
          .fab{
              color:#D3D3D3;
              min-height:20px;
          }
          .far{
              color:#D3D3D3;
              min-height:20px;
          }
          .fas{
              color:#D3D3D3;
              min-height:20px;
          }
          a:hover{
             color:#29CB12;
          }
          a{
              color:#D3D3D3;
          }
          .row{
              margin-right: 0px; 
              margin-left: 0px;
          }
      </style>
 </head>
    <body>
        <div class="flex-container">
            <nav class="navbar navbar-inverse">
                  <div class="container-fluid">
                    <div class="navbar-header">
                                <a class="navbar-brand" href="../hub" style="padding: 0;padding-left: 15px;"><img src="" style="height:50px;width:85px;"></a>
                    </div>
                    <div class="navbar-right" >
                                    <button type="button" id="sm-back" style="background-color:transparent;border:1px;margin-right:15px;">
                                            <a href="">
                                                <span>&#8592;</span>
                                            </a>
                                </button>
                       </div>
                    </div>
            </nav><!--Nav Bar END-->
                <div class="ChatDisplay " id="MessagesContainer" style="overflow-x: hidden;">
                        <?php
                            $sql = "SELECT * FROM `MainChat` ORDER BY `date`";
                            $result = mysqli_query($connection, $sql);
                            $resultCheck = mysqli_num_rows($result);
                            if ($resultCheck > 0){
                                while($row = mysqli_fetch_assoc($result)){
                                    //Giv class here
                                    if($row['userId'] != $_SESSION['userId']){//id user id do not =
                                        //style accordingly
                                        $newmsg = strtolower($row['msg']);
                                        if(substr($newmsg, 0,5) == '!img:'){
                                            $cmd = substr($row['msg'],5);
                                            echo "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br><img src='" .$cmd."' style='height: 155px;width: 200px;'></div></div><br></div>";
                                        } elseif(substr($newmsg, 0,4) == '!yt:'){
                                            "<div class='row' ><div class='notU pull-left col-12' style='width:50vw;height: fit-content;'><text class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."</text><br><iframe style='width: 100%; height: 25vw;' src='https://www.youtube.com/embed/".substr($row['msg'], 5 + 31)."?autoplay=0&origin=https://z' frameborder='0'allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div><br></div>";
                                        }else {
                                        echo"<div class='row'><div class='notU pull-left row col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br>".$row['msg']." </div></div><br></div>";
                                        }
                                    } else { //if they do 
                                        //style accordingly
                                        $newmsg = strtolower($row['msg']);
                                        if(substr($newmsg, 0,5) == '!img:'){
                                            $cmd = substr($row['msg'],5);
                                            echo "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br><img src='" .$cmd."' style='height: 155px;width: 200px;'></div></div><br></div>";
                                        } elseif(substr($newmsg, 0,4) == '!yt:'){
                                            echo "<div class='row'><div class='you pull-right col-12' style='width:50vw; height: fit-content;'><text class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."</text><br><iframe style='width: 100%; height: 25vw;' src='https://www.youtube.com/embed/".substr($row['msg'], 5 + 31)."?autoplay=0&origin=https://' frameborder='0'allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div><br></div>";
                                        } else {
                                        echo"<div class='row'><div class='you pull-right row col-4'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br>".$row['msg']." </div></div><br></div>";
                                        }
                                    }
                                }
                            }
                        ?>
                </div>
                <div>
                    <div class="SendBox">
                        <input type='text' id="messageBox" class="fill">
                         <button type="button" class="btn btn-secondary" id="pop"><img src="" style="height:30px;width:25px;"></button>
                        <button type="button" id="send"  style="width:150px;">Send</button>
                    </div>
                </div>
         </div>
         <script>
             var newUserId = <?=$_SESSION['userId']?>;
             var newUserImage = "<?=$_SESSION['userImage']?>";
         </script>
        <script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="js/main.js"></script>
        <script src="https://js.pusher.com/4.4/pusher.min.js"></script>
        <script>
            $(document).ready(function(){
                 $('#pop').popover({title: "<h5><img src='https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png' style='height:30px;width:25px;'> Giphy Gif <button type='button' class='close' id='closeGui' ><span aria-hidden='true'>&times;</span></button></h5>", content: "<h4 id='WTD'>Click On The Gif You Want to Send</h4><input id='searchBar' type='text'><button id='queryGiphy'>Search</button></div><div id='container'></div></div>", html: true, placement: "top", trigger: "manual"}); 
                $('#pop').click(function(event) {
                    $("#pop").popover('toggle');
                });
                $('#pop').on('shown.bs.popover', function(){
                    function searchGiphy() {
        var NewSearch = $("#searchBar").val();
        var search = NewSearch.split(' ').join('+');
        console.log('Searching W/ KeyWord:'+search);
                        $("#searchBar").val('');
                        $("#searchBar").hide();
                        $("#queryGiphy").attr("disabled", true);
                        $("#queryGiphy").hide();
                        $("#WTD").show();
                        $("#container").empty();
        var xhr = $.get("https://api.giphy.com/v1/gifs/search?q="+search+"&api_key=&limit=5");
                        xhr.done(function(data) {
                            for (var i = 0; i < data.data.length; i++){
                               $("#container").append("<img src='"+data.data[i].images.original.url+"' style='height:200px;width: 250.5px;'>");
                            }
                        });
            }               
                            $('exampleModalLong').click(function(event){
                                event.stopPropagation();
                            });
                            $("#container").on("click", "img", function (event) {
                               // var _target = event.target;
                                   var newSrc = $(event.target).attr('src');
                                   alert("<img src='"+newSrc+"'>")
                            });
                            $('#closeGui').click(() => {
                                $("#searchBar").val('');
                                $("#searchBar").show();
                                $("#queryGiphy").attr("disabled", false);
                                $("#queryGiphy").show();
                                $("#WTD").hide();
                                $("#container").empty();
                            });
                            $('#btnClose').click(() => {
                                $("#searchBar").val('');
                                $("#searchBar").show();
                                $("#queryGiphy").attr("disabled", false);
                                $("#queryGiphy").show();
                                $("#WTD").hide();
                                $("#container").empty();
                            });
                    document.getElementById("closeGui").addEventListener("click", () =>{
                        $("#pop").popover('hide');
                    });
                    document.getElementById("queryGiphy").addEventListener("click", () =>{
                        searchGiphy();
                    });
                    $('#searchBar').on('keypress',function(e) {
                            if(e.which == 13) {
                                searchGiphy();
                            }
                        });
                  });

            });
        </script>
              <script>
        function insertMessage(userId, msg, time, userName){
            var htmlToInsert = '';
            var consoleCommand = '';
            if(myUserId == userId){
                if(msg.toLowerCase() == "!reload" || msg.toLowerCase() == "!hub" ||msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?" || msg.substring(0, 5).toLowerCase() == "!img:" || msg.substring(0, 4).toLowerCase() == "!yt:" || msg.toLowerCase() == "!pro"){
                    if(msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?"){
                        htmlToInsert = "<div class='row'><div class='you pull-right col-12'>Commands<br>!help || !? | get a List of CMDS;<br>!reload | Reload the messenger;<br>!hub| to got to the Hub Page;<br>!pro | to go to your Profile Page;<br>!pray to go to Prayer Request Page;</div><br></div>";
                    }
                    if (msg.toLowerCase() == "!reload"){
                    location.reload();
                    } 
                    if(msg.toLowerCase() == "!hub"){
                        window.open("","_self");
                    }
                    if(msg.toLowerCase() == "!pro"){
                        window.open("","_self");
                    }
                    if(msg.toLowerCase() == "!pray"){
                        window.open("","_self");
                    }
                    if(msg.substring(0, 5).toLowerCase() == "!img:"){
                        htmlToInsert = "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br><img src='"+msg.substring(5)+"' style='height: 155px;width: 200px;'></div></div><br></div>";
                    } else {
                htmlToInsert = "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br>"+msg+" </div></div><br></div>";
                var audio = new Audio('sentmsg.mp3');
                audio.play();
                }
            } else {
                if(msg.toLowerCase() == "!reload" || msg.toLowerCase() == "!hub" ||msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?" || msg.substring(0, 5).toLowerCase() == "!img:" || msg.substring(0, 4).toLowerCase() == "!yt:"){
                    if(msg.substring(0, 5).toLowerCase() == "!img:"){
                        htmlToInsert = "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br><img src='"+msg.substring(5)+"' style='height: 155px;width: 200px;'></div></div><br></div>";
                    }   else {
                        consoleCommand = msg;
                        msg = '';
                    }
                } else {
                    if (msg != '' || msg != 'undefined'){
                        htmlToInsert = "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br>"+msg+" </div></div><br></div>";
                        var audio = new Audio('newmsg.mp3');
                        audio.play();
                    } else {
                        console.log('The command '+consoleCommand+': was logged by '+userName);
                        htmlToInsert = '';
                    }
                }
            }
            if(htmlToInsert != ''){
            $('#MessagesContainer').append(htmlToInsert);
             objDiv = document.getElementById("MessagesContainer");
            setTimeout(function(){
                objDiv.scrollTop = objDiv.scrollHeight;
            }, 500);
            } else {
                console.log('NOGO!');
            }
        }
        // Enable pusher logging - don't include this in production
        Pusher.logToConsole = true;

        var pusher = new Pusher('api Key', {
          cluster: 'mt1',
          forceTLS: true
        });
        var myUserId = "<?=$_SESSION['userId']?>";
        var channel = pusher.subscribe('my-channel');
        channel.bind('MainChat', function(test) {
        insertMessage(test.userId, test.message, test.time, test.userName);
        });
      </script>
      <script src="js/GIFY.js"></script>
    </body>
</html>

вся помощь приветствуется ~ Wessi