You will need to dynamically generate the text boxes since you don't know how many there will be in advance. Use the Document Object Model (DOM) for this, or alternatively, use a framework like JQuery which makes the DOM easier to use.
In this case, you need to create n * n text fields, and store them in a grid in two distinct senses of "grid". Firstly, you will want to store them in a physical HTML table, so the user sees them as a grid (that answers question 1). Secondly, you will want to store them in a 2D JavaScript array, so your code can manipulate them (that answers question 2).
So, use document.createElement("input") to create each text field. Use the setAttribute method to set the attributes of the text field, such as its "value" attribute to store the text inside it (these are the same attributes as you would see in the static HTML source for a text field). Then, store the text fields in a 2D array so you can refer back to them later. You should also be dynamically creating an HTML table (using the DOM), dynamically creating rows (tr) and cells (td), and then inserting into each td the generated text field.
Once you have done all that, the user can see all the text fields. When you need to validate them, just refer back to the 2D array you created. Use getAttribute("value") on each of the text fields to get their value back as a string. Then you can validate it as you like.
