Hide a div when clicked outside of it
===

This question has been asked multiple times, however none of the answers seem to work for me.

The css of the div is as follows:

    #info{
    display: none;
    position: fixed;
    z-index: 500;
    height: 50%;
    width: 60%;
    overflow: auto;
    background: rgba(187, 187, 187, .8);
    }

I tried to use the following code:

    $("#info").click(function(e){
    e.stopPropagation();
    });
    
    $(document).click(function(){
    $("#info").hide();
    });

as well as this code:

    $(document).mouseup(function (e){
        var container = $("#info");
    
        if (container.has(e.target).length === 0) {
            container.hide();
        }
    });

Yet whenever i click on the div it also disappears, no clue why but it does.<br/>
Any thing else that might work? 