Javascript add class to element using js

i have created a list with js(works fine) whenever the user is focusing the password field:

let password = document.querySelectorAll(".control-group")[3];
password.addEventListener("focusin", () => {
  let row = document.createElement("ul");
  row.innerHTML = `
    <li>One lowercase character</li>
    <li>One uppercase character</li>
    <li>One number</li>
    <li>One soecial character</li>
    <li>One lowercase character</li>
    <li>Eight characters minimum</li>
  `;
  password.appendChild(row);
});

Then i have created and added a hidden class to the ul when the field loses focus but the ul class doesn't disappears when the password field loses focus. Any idea?

password.addEventListener("focusout", () => {
  let style = document.createElement("style");
  style.type = "text/css";
  let row = document.createElement("ul");
  style.innerHTML = `.hidden {display: none}`;
  document.getElementsByTagName("head")[0].appendChild(style);
  row.classList.add("hidden");
});

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW