Ask for help, turntable lottery bug solution? About forEach about async

what I expect is that people who can never be selected are stored in arr, and then push them to arr
after each selection, and in the foreground presentation, they are always rotated in all names names
my code is as follows:

var names = ["A", "B", "C", "D"];
var arr = ["C"];
var box3d = document.querySelector("-sharpbox3d");
var elData = document.createDocumentFragment();
var boxNames = box3d.children;
// 
names.forEach(function (item) {
  var li = document.createElement("li");
  // li.innerHTML = item.name;
  li.innerHTML = item;
  elData.appendChild(li);
});
box3d.appendChild(elData);
// 
var deg = 360 / boxNames.length;
var innerDeg = (180 - deg) / 2;
var disR = Math.tan(innerDeg * Math.PI / 180) * 25;
Array.from(boxNames).forEach(function (item, index) {
  item.style.transform = "rotateX(" + index * deg + "deg) translateZ(" + disR + "px)";
});
// 
var btn = document.querySelector(".btn");
var box3d = document.querySelector("-sharpbox3d");
var boxNames = box3d.children;
// 
btn.onclick = function () {
  var nub = Math.floor(Math.random() * names.length);
  var deg = 360 / boxNames.length;
  var round = Math.round(Math.random() * 5) + 2;
  var targetDeg = -deg * nub + round * 360;
  var time = Math.abs(targetDeg) * 2;
  css(box3d, "rotateX", 0);
  // 
  if (names.length - arr.length < 0) {
    console.log("")
    return false
  }
  // arr
  console.log(1, names[nub], nub, targetDeg)
  arr.forEach(function (item) {
    if (names[nub] == item) {
      nub = Math.floor(Math.random() * names.length);//nubforEachforEachreturn
      targetDeg = -deg * nub + round * 360;
      console.log(2, names[nub], nub, targetDeg)
    }
  })
  console.log(3, names[nub], nub, targetDeg)//consoleforEach
  //arrarr
  arr.push(names[nub])
  // 
  mTween({
    el: box3d,
    duration: time,
    fx: "easeOutStrong",
    attrs: {
      rotateX: targetDeg
    },
    cb: function () {
      // alert(":" + names[nub].name);
      console.log(":" + names[nub]);
      // var index = arr.indexOf(names[nub]) + 1;
    }
  })
}

after testing, the problem that is temporarily located is here:

  console.log(1, names[nub], nub, targetDeg)
  arr.forEach(function (item) {
    if (names[nub] == item) {
      nub = Math.floor(Math.random() * names.length);
      targetDeg = -deg * nub + round * 360;
      console.log(2, names[nub], nub, targetDeg)
    }
  })
  console.log(3, names[nub], nub, targetDeg)

1. The first question is that nub retrieves random values after the first match, but how do you get random values again when the second match is still in progress? (tried to write forEach as recursive, but could not get the value from forEach return)?
2. The second question is, how does console3 execute after forEach?

var arr = [1,2,3,4,5,6]; // var passArr = [1,2]; // //_arr , var _arr = arr.filter(x=>!passArr.includes(x)).sort((x,y)=>Math.random()-0.5); //, // function cj(n){ n = n || 1; //; //_arr.sort((x,y)=>Math.random()-0.5); //, return _arr.splice(0,n); }