QuerySelector only functioning for one ID, multiple values give no output

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 tried using querySelectorAll but that did not work, using querySelectorAll made it so not even one div had an output. I also tried making it respond to all div elements but that broke some functionality, and did not give me what I wanted. Basically, what I want is to have functionality for all the divs when the "check" button is pressed. Is this possible with querySelector or querySelectorAll?

Here is some of my code:

JS:

    const pText = document.querySelector("#p123").innerText.toUpperCase()
const div = document.querySelector("#amo1, #amo2, #amo3, #amo4, #amo5, #amo6, #amo7") // I tried one value and that worked, multiple values will not work for me, this is the main problem.
const button = document.querySelector("#button123")


button.addEventListener("click", () => {
  const text = div.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)) {
    div.innerText = text
    return
  }

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

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

//clear on focus
div.addEventListener("focus", () => {
  div.innerHTML = ""
})

HTML:

<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 class="square">
 <img/>
</div>
   <div id="game-board">

   </div>
<details>
 <summary class = "summary1">Octordle Summary</summary>
 <h2 class = "summary-content">Octordle is similar to the hit game Wordle, but 8 letters instead of 5.</h2>
</details>

<!-- <input type = text class = "text-box">
<input type = text class = "text-box2"> -->
<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>

Here is all my lines of code in a sololearn project: https://code.sololearn.com/WX59M6HHngc5 Please help, thank you in advance. (By the way, ignore the text input above the "check" box, that was just for testing, I'm focusing on the grid boxes right now)