How to dynamically display a popup

Hi DW.

I'm trying to display a popup over an input box, but the issue is that some websites that I want to also display on have div class name that contains many classes in it which result it a div class name to have spaces in it which is not a problem.

I would have used id for this but the issue is that some site doesn't have the ids. if you would take the facebook sample code:

<div class="_6lux">
<div class="_6luy _55r1 _1kbt" id="passContainer">
<input type="password" class="inputtext _55r1 _6luy _9npi" name="pass" id="pass" data-testid="royal_pass" placeholder="Password" aria-label="Password" />
<div class="_9ls7" id="u_0_b_sX">
<a href="#" role="button">
<div class="_9lsa">
<div class="_9lsb" id="u_0_c_3V">
</div>
</div>
</a>
</div>
</div>
</div>

So with the above what I want is to get the div with class _6lux because this work if I use that div but if I use any element inside that div it doesn't work correctly. The popup I want to show on a password field of that particular open website is Popup source link

Now if you also take Daniweb as another example code is

<div class="form-group">

<label for="password901886946" class="control-label d-none">Password</label>

<input type="password" class="form-control" id="password901886946" name="password" placeholder="Password">

</div>

And for Daniweb it work correctly with this div with class form-group. What I'm trying to do is to be able to dynamically locate the correct div that will correctly display this popup over the password field. I inject the same css code from the above link to the open website then also inject

var popup = document.getElementById("mypopup");
  popup.classList.toggle("show");

which triggers to display or hide the popup. My full css and dynamic selecting of the div code is

var inputs = document.getElementsByTagName('input');
    var dynamicclass;

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'password') {
        // Trying to get the id of this element
         var eid = inputs[i].id
         parentDiv = inputs[i].parentNode;//.className;

        if(parentDiv.className.includes(" ")){
        // Here was trying to switch from class to ID of the actual field but it doesn't work
        dynamicclass = "#"+inputs[i].id;
        }else{
            dynamicclass = "."+parentDiv.className;
        }
    }
}


    document.getElementsByTagName('head')[0].insertAdjacentHTML("beforeend","<style>"+dynamicclass+" {position: relative;display: inline-block;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}"+dynamicclass+" .popuptext {visibility: hidden;width: 160px;background-color: #555;color: red;text-align: center;border-radius: 6px;padding: 8px 0;position: absolute;z-index: 1;bottom: 125%;left: 50%;margin-left: -80px; backgroundColor: red;}"+dynamicclass+" .popuptext::after {content: '';position: absolute;top: 100%; left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: #555 transparent transparent transparent;}"+dynamicclass+" .show {visibility: visible;-webkit-animation: fadeIn 1s;animation: fadeIn 1s;}@-webkit-keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}}@keyframes fadeIn {from {opacity: 0;}to {opacity:1 ;}}</style>");

document.getElementById(eid).insertAdjacentHTML("beforebegin","<span class='popuptext' id='mypopup'>A Simple Popup!</span>");

The above work well with Daniweb. So my question is how can I make this work for all websites which I also don't know but it would be best if this can work on the majority of the websites.