JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body>
        <div id="my_popup" style="position: absolute; display: none;">some content</div>
        <a href="#my_popup" id="napFilt">Filter</a>
    </body>
</html>

JavaScript

var readyStateInterval;

// Check (by interval) if the document is ready.
// This is need for the "makeLinksWork" method to find the links to "make work"
function docIsReady(){
    if(document.readyState == 'complete'){
         makeLinksWork();
        clearInterval(readyStateInterval);
    }
}

/**
 * This function is used to assign a onclick to all the links you want to give this
 * ability. You have to change the search for the links if you want more than the one
 * you supplied in your example.
 * This is acutally the only way i know to get the event as a parameter which is needed to
 * get the current mouse position.
 */
function makeLinksWork(){
    // Get source link
    var sourceLink = document.getElementById('napFilt');
    
    // Assign onclick event with event (e) as parameter
    sourceLink.onclick = function(e){
        // Since we want to keep this variable we use the href tag to find the right div
        var href= e.target.href.split('#');
        var id = href[1];
        // Your part...
        if (document.getElementById){ 
            obj = document.getElementById(id);
             if (obj.style.display == "none") {
                obj.style.display = "";
                // Getting the actually position of the mouse which is provided without px so we add it
                obj.style.top = e.clientY + 'px';
                obj.style.left = e.clientX + 'px';
            } 
        }
        // We do not want the browser to put the hashtag behind the url so we return false here to prevent it.
        return false;
    }
}
        
// interval to call docisReady function
readyStateInterval = setInterval(
        function(){
        docIsReady()
        },
        500
       );