JS невозможно добавитьEventListener к элементу кнопки при создании всей разметки через javascript

Question

Мне нужно создать весь контент, используя простой JS (без записи в html напрямую). Мне нужно добавить событие к кнопке ОК для каждой карточки. При нажатии кнопки необходимо отображать значения только для имени и возраста элемента, на который был выполнен щелчок.

Что я делаю не так?

var group = {
    "members": [
        {
            "name": "Roger",
            "age": 38
        }, {
            "name": "Ana",
            "age": 29
        }, {
            "name": "Elisa",
            "age": 51
        }, {
            "name": "Ramón",
            "age": 71
        }, {
            "name": "Eva",
            "age": 18
        }, {
            "name": "Martín",
            "age": 33
        },
    ]
  };

var container = document.createElement("DIV");
container.classList.add("container");
var button = document.createElement("BUTTON");
button.classList.add("button");
button.innerHTML = "Aceptar";
button.onclick = function() {
showGroup();
};
document.body.appendChild(container).appendChild(button);

window.addEventListener("resize", keepSquare);

function showGroup() {
    group.members.forEach(value => {
        var member = document.createElement("DIV");
        member.classList.add("member");
        var button2 = document.createElement("SPAN");
        button2.classList.add("ok_button");
        button2.innerHTML = "ok";
        button2.onclick = function(e) {
            if (!button2) {
                return;
            }
            createAlert(value);
        }
        member.appendChild(button2);
        member.innerHTML += "<p class='member_name'>" + value.name + "</p>";
        member.innerHTML += "<span class='member_age'>" + value.age + "</span>";
        container.appendChild(member);
      });
    keepSquare();
}

document.addEventListener("load", function() {
    var butt = document.getElementsByClassName("ok_button");
    console.log(butt);
    for (var i= 0; i > butt.length; i++) {
        butt[i].onlick = createAlert(group.members);
    }
});

function keepSquare() {
    var box = document.querySelectorAll(".member");
    if(box.length > 0) {
        for (i = 0; i < box.length; ++i) {
            var box_width = box[i].offsetWidth;
            box[i].style.height = box_width + "px";
        }
    }
}

function createAlert(member) {
    var alert = document.createElement("DIV");
    document.body.appendChild(alert);
    alert.classList.add("alert");
    alert.innerHTML = "<div class='alert'>" + 
    "<span>" + member.name + "</span>" +
    "<input type='number' id='age_field' name='age_field' value='" + member.age + "'></input>" +
    "</div>";
}

body {
  font-size: 16px;
}

.button {
  font-size: 2em;
  width: 95%;
  margin: 0.5em 0 0.825em;
  padding: 0.325em;
  border: 1px crimson dotted;
  border-radius: 10px;
  box-shadow: 0 0 11px crimson inset;
  outline: none;
  cursor: pointer;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.member {
  position: relative;
  box-sizing: border-box;
  width: 93%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  border: 1px crimson dotted;
  border-radius: 10px;
  box-shadow: 0 0 29px crimson inset;
  margin-bottom: 1em;
}

.member_name {
  margin: 0;
}

.ok_button {
  width: 20px;
  height: 20px;
  background-color: black;
  text-align: center;
  line-height: 20px;
  color: white;
  position: absolute;
  bottom: 5px;
  top: auto;
  left: 5px;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  font-size: 1rem;
  padding: 3px;
}

.alert {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.alert.visible {
  display: block;
}

@media (min-width: 600px) {
  .member {
    width: 30%;
  }

  .ok_button {
    top: 5px;
    left: auto;
    right: 5px;
  }
}

@media (min-width: 600px) and (max-width: 799px) {
  .member {
    width: 46%;
  }
}