I have an array of HTML elements in a Javascript array. I would like to add an onclick to all of them. When clicked an element would toggle between no class and the class *live*.

```js
const size={
    x:10,
    y:10
};
var matrix=[];
for(var i=[0, 0], rows=[]; i[0]<size.y; i[0]++){
    rows.push(document.createElement("tr"));
    document.querySelector("tbody").appendChild(rows[i[0]]);
    matrix.push([]);
    for(i[1]=0; i[1]<size.x; i[1]++){
        matrix[i[0]][i[1]]=document.createElement("td");
        rows[i[0]].appendChild(matrix[i[0]][i[1]]);
    }
}//this bit works↑
for(var i=[0,0]; i[0]<matrix.length; i[0]++){
    for(i[1]=0; i[1]<matrix[0].length; i[1]++){
        matrix[i[0]][i[1]].onclick=function(){
            if($(this).hasClass("live")){
                $(this).removeClass("live");
            }else{
                $(this).addClass("live");
            }
        }
    }
}
```

```css
table{
    border-collapse:collapse;
                background-color:black;
}
td{
    width:47.5px;
    height:47.5px;
    padding:0px;
    border:2.5px solid gray;
}
td.live{
    background-color:white;
}
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tbody>

   </tbody
</table>
```