Make div disappear when clicking anywhere outside of it?

I am trying to make my div element disappear when clicking anywhere out side of it. The div is created when clicking a path from my SVG element and is supposed to close and open a new one when clicking the another path in the SVG. I think I may have set this up wrong and have been trying to figure out the most effective way to get it working. The div that has been created will hold an X button that will close the div and reload the page to bring back the styling options. Would that be the best way to go about this because I am thinking that may not be the most efficient way to do this.

$(document).ready(function(){
    $("#SVGGraphic").load("/src/Areas-of-Focus.svg", function(event){
        $("#SVGGraphic svg").css("height", "1000", "width", "1000px");

        console.log("loaded successfully")
        
        $("path").on("click", function(evt) {
            var parsedStringArray = evt.target.id.split('_');
            var pathID = ("#" + (evt.target.id))
            console.log(parsedStringArray);
            areaOfFocusBody(parsedStringArray[0]);
            colorChanger(pathID); 
        });
    })
})

function colorChanger(pathName){
    $("path").css("filter", "opacity(25%)")
    $("circle").css("filter", "opacity(25%)")
    $(pathName).css("fill", "#f1562c")
    $(pathName).css("filter", "opacity(100%)")
}

function areaOfFocusBody(areaOfFocus) {
    $("#DOM").append(`
    <div class="textbox" id="menucontainer">
        <span id="close" onclick="this.parentNode.remove(); location.reload(); return false;" class="btn btn-default large">
            <img src="/src/Esc X.svg" height="33" width="33"></img>
        </span>
        <h2>${focusCard[areaOfFocus]?.title ?? 'none'}</h2>
        <div class="card-body" id="card-div">
            <p class="card-body" style="padding: 1rem">${focusCard[areaOfFocus]?.body ?? 'none'}</p>
            <div class="container">
                <div class="row">
                    <div class="col text-center" style="padding-bottom: 1rem;">
                        <a target="_blank" rel="noopener noreferrer" href="${focusCard[areaOfFocus]?.url ?? 'none'}">
                            <button class="btn btn-primary" role="button">
                                Show Employees in this Section <img src="/src/opens-new-tab-arrow.svg" height="20">
                            </button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>`)
}

Before Click Event
After Click Event