Button changing newest div item instead of the correct

0
votes

I created a div table of sorts, where there is a button, and that button creates a box, and what is supposed to happen is that you can click any of the {x} boxes and it colors it black However, instead of coloring that box black(or white), it colors the newest one black(or white). How do I change this?

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Rule 110</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <script src="script.js"></script>
  <center><h1>Rule 110</h1></center>
  <div class="grid-container">
  
    <main id="content"></main>
  
  
  </div>
  <button onclick=add() class="button">+</button>
</body>

</html>

Javascript:

const first = document.getElementById("first")
const second = document.getElementById("second")
const third = document.getElementById("third")
const fourth = document.getElementById("fourth")
const fifth = document.getElementById("fifth")
const sixth = document.getElementById("sixth")
const seventh = document.getElementById("seventh")
const eigth = document.getElementById("eigth")
const ninth = document.getElementById("ninth")
var extra = 1;
var thingrowx=0;
var thingrowy = 1;
function changeColor(test) {
  if (document.getElementById(test).className === "grid-item-white"){
    document.getElementById(test).className="grid-item-black";}
  else {
    document.getElementById(test).className="grid-item-white";
  }
}

function createTable() {
  rn = window.prompt("Input number of rows", 1);
  cn = window.prompt("Input number of columns",1);
  
   for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('myTable').insertRow(r);
   for(var c=0;c<parseInt(cn,10);c++)  
    {
     var y=  x.insertCell(c);
     y.innerHTML="Row-"+r+" Column-"+c; 
    }
   }
}
function repeat(func, times) {
    func;
    times && --times && repeat(func, times);
}
function test() {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="grid-item-white" id="combined"   onclick=changeColor('combined')>
      </div>`
    )
}
function add() {
  extra += 1;
  thingrowx += 1;
  var combined = "(" + thingrowx + "," + thingrowy + ")"
  alert(combined)
  repeat(test(), thingrowy) 
}

CSS:

.button {
  border: none;
  background-color: black;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  color: white;
}

.button1 {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color: white; 
  color: black; 
  border: 2px solid #008CBA;
}

.button2:hover {
  background-color: #008CBA;
  color: white;
}


.grid-container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px 0px 50px 50px 50px 0px 50px 50px 50px 50px 50px 50px 50px;
  padding: 10px;
}

.grid-item-white {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

.grid-item-black {
  background-color: black;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  color: white
}

body {background-color: #cdf1eb ;}
javascripthtmlcss