Multiple popups but same content

I'm have two responsive popups (function1 & function2) in my page but I cannot figure out how to modify this code to make it work for both. So far, I can only get one to work. The other popup just mimics the text from the first popup. These popups are tied to different buttons.

One button is called "Construction" and one button is called "Supply". Both have unique text that needs to show up in their popup windows. Unfortunately, if I click on the "Construction" button first, then this text is carried over to when I click on the "Supply" button second. And vice versa. If I click on the "Supply" button first, then this text is carried over when I click on the "Construction" button.

<head>
 <script type="text/javascript">
    var popupWindow = null;
    var popupIsShown = false;
    
    function function1() {
            if (!popupIsShown) {
                if (!popupWindow) {
                    popupWindow = document.createElement ("div");
                    popupWindow.style.backgroundColor = "white";
                    popupWindow.style.border = "solid black 2px";
                    popupWindow.style.position = "absolute";
                    popupWindow.style.width = "400px";
                    popupWindow.style.height = "150px";
                    popupWindow.style.top = "200px";
                    popupWindow.style.left = "250px";
                    popupWindow.innerHTML = " NOTE: None of the actions described here will begin until funds are received.";
                }
document.body.appendChild (popupWindow);
                window.addEventListener ('click', RemovePopup, true);
                popupIsShown = true;
                event.stopPropagation ();
            }
        }
    }
function RemovePopup(event) {
        if (popupIsShown) {
            var relation = popupWindow.compareDocumentPosition (event.target);
            var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
            if (!clickInPopup) {
                document.body.removeChild (popupWindow);
                window.removeEventListener ('click', RemovePopup, true);
                popupIsShown = false;
            }
        } 
    }
 </script>
</head>
<body>
 <input type="button" value="Construction" onclick="function1();"/>
</body>

<head>
<script type="text/javascript">
    var popupWindow = null;
    var popupIsShown = false;
    
    function function2() {
            if (!popupIsShown) {
                if (!popupWindow) {
                    popupWindow = document.createElement ("div");
                    popupWindow.style.backgroundColor = "white";
                    popupWindow.style.border = "solid black 2px";
                    popupWindow.style.position = "absolute";
                    popupWindow.style.width = "400px";
                    popupWindow.style.height = "150px";
                    popupWindow.style.top = "200px";
                    popupWindow.style.left = "250px";
                    popupWindow.innerHTML = "Depending on the dollar value and urgency of the work.";
                }
document.body.appendChild (popupWindow);
                window.addEventListener ('click', RemovePopup, true);
                popupIsShown = true;
                event.stopPropagation ();
            }
        }
    }
function RemovePopup(event) {
        if (popupIsShown) {
            var relation = popupWindow.compareDocumentPosition (event.target);
            var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
            if (!clickInPopup) {
                document.body.removeChild (popupWindow);
                window.removeEventListener ('click', RemovePopup, true);
                popupIsShown = false;
            }
        } 
    }
 </script>
</head>
<body>
 <input type="button" value="Supply" onclick="function2();"/>
</body>

Solution

First of all, you can't have 2 head tags and 2 body tags, but maybe that's just how you put it on stackoverflow. the code works as if both script tags are together (in the same scope) and so the variables from the first piece of code can be accessed from the second piece of code. which means that when you set the popupWindow variable in the first function, and then call the second function, it won't be null anymore. so it doesn't set anything.

I think this can just be solved by removing the if(!popupWindow) (or if you don't want to make all that code run everytime you can also just move the innerHTML part outside of the if).

document.removeChild does not actually remove the variable and set it to null, it just removes that element from the document i believe. what you can also do is add popupWindow = null to your RemovePopup function like this:

function RemovePopup(event) {
    if (popupIsShown) {
        var relation = popupWindow.compareDocumentPosition (event.target);
        var clickInPopup = (event.target == popupWindow) || (relation & Node.DOCUMENT_POSITION_CONTAINED_BY);
        if (!clickInPopup) {
            document.body.removeChild (popupWindow);
            window.removeEventListener ('click', RemovePopup, true);
            popupIsShown = false;
            popupWindow = false;
        }
 
    } 
}