<div class="container">
    <div class="box bt-0 bl-0"><span class="text"></span></div>
    <div class="box bt-0">     <span class="text"></span></div>
    <div class="box bt-0 br-0"><span class="text"></span></div>
    <div class="box bl-0">     <span class="text"></span></div>
    <div class="box">          <span class="text"></span></div>
    <div class="box br-0">     <span class="text"></span></div>
    <div class="box bl-0 bb-0"><span class="text"></span></div>
    <div class="box bb-0">     <span class="text"></span></div>
    <div class="box br-0 bb-0"><span class="text"></span></div>
  </div>

I was making tic tac toe and got confuse how can I give "x","0"value to all the rows and columns

This is the js that i have applied

let allboxes=document.querySelectorAll(".box")

for (i=0;i<allboxes.length;i++)


allboxes[i].addEventListener("click",()=>{

    $("div.text").click(function(){
        $(this).closet()
    })
})