querySelectorAll only gives output for one div in grid after forEach() loop

Question

Recently, I have been trying to create a wordle game but with 8 letters, and it has been going well, though, when I input my answer into the div boxes, only the first div gets a response when I click the big "CHECK" button. I am attempting to use a forEach() loop to solve this problem but I am still only getting one div to get an output... could someone please help me? Also, I want it to work for the multiple divs in the grid, just for clarification.

Full code: https://code.sololearn.com/WX59M6HHngc5

Here is my JS code:

const pText = document.querySelector("#p123").innerText.toUpperCase()
const button = document.querySelector("#button123")

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {

button.addEventListener("click", () => {
  const text = document.querySelector(".amot").textContent.toUpperCase()

  //don't check if there are numbers/non letters and text length < 8
  if (text.match(/\d/gi) || text.length < 1 || text.match(/[^a-z]/gi)) {
    document.querySelector(".amot").innerText = text
    return
  }

  document.querySelector(".amot").innerHTML = ""
  text.split("").forEach((letter, i) => {
    if (pText.includes(letter) && pText[i] === letter) {
      document.querySelector(".amot").innerHTML += `<span style="color: lime">${letter}</span>`
    } else if (pText.includes(letter)){
      document.querySelector(".amot").innerHTML += `<span style="color: orange">${letter}</span>`
    } else {
      document.querySelector(".amot").innerHTML += `<span style="color: lightgrey">${letter}</span>`
    }
  })
})

//blur the div if text is longer than 8 letters or key = "space"
document.querySelector(".amot").addEventListener("keydown", (e) => {
  if (document.querySelector(".amot").innerText.length > 0 || e.keyCode == 32) {
    document.querySelector(".amot").blur()
  }
})

//clear on focus
document.querySelector(".amot").addEventListener("focus", () => {
  document.querySelector(".amot").innerHTML = ""
})},

Here is some of my HTML code (The rest can be found at the link at the bottom):

<p id = "p123">ABsOLUTE</p>
<div id = "div123" contenteditable="true" style="border: 5px solid; padding: 5px; font-size: 22px; font-weight: bold; text-transform: uppercase;" spellcheck="false"></div>
<button id = "button123">check</button>
<div id = "amoo">
<div class="container" style = "position:relative; left:825px; top:-400px;" id = "testu">



    <div oninput = "inputFunc()" tabindex = "1" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo1"></div>
    <div oninput = "inputFunc()" tabindex = "2" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo2"></div>
    <div oninput = "inputFunc()" tabindex = "3" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo3"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo4"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo5"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo6"></div>
    <div oninput = "inputFunc()" class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo7"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo8"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo9"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo10"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo11"></div>
    <div class = "amot" onkeypress="return (this.innerText.length <= 0)" contenteditable = "true" id = "amo12"></div>
    
</div>

Here is my full code: https://code.sololearn.com/WX59M6HHngc5 Please help me! Thank you in advance...

Answer 1

Short answer: replace document.querySelector(".amot") with element

Explanation:

Notice the element param inside the forEach callback function

The problem is that inside the forEach loop you are using the syntax

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
  document.querySelector(".amot").doStuff()
}

This means that for every iteration, you are querying the first .amot element and doing stuff to it, while the rest remain intact. Instead, you should

Array.from(document.querySelectorAll(".amot")).forEach(function(element) {
  element.doStuff()
}

This way, you are applying the logic for every element in document.querySelectorAll(".amot")