# Create two arrays duplicate code

I wrote two functions that creates two 2 dimensional arrays, but there is a lot of duplicate code and I don't know how to split it in one function. Is it even possible? I know the rule don't repeat yourself but I don't know how to use it because I learn javascript and programming. Also do you recommended books to learn how to write clean code.

### First function

function createMatrixA() {

var i, j;
var htmlElements = "";
var matrixWidth = parseInt(document.getElementById("matrix-width-a").value, 10);
var matrixHeight = parseInt(document.getElementById("matrix-height-a").value, 10);

if (matrixWidth <= 7 && matrixHeight <= 7) {
matrixA = new Array(matrixHeight);
for (i = 0; i < matrixA.length; i++) {
matrixA[i] = new Array(matrixWidth);
}
for (i = 0; i < matrixA.length; i++) {
htmlElements += "<div>";
for (j = 0; j < matrixA[i].length; j++) {
matrixA[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"a" + (i + 1) + (j + 1) + "\" placeholder=\"a" + (i + 1) + (j + 1) + "\" ></div>";
htmlElements += matrixA[i][j];
}
htmlElements += "</div>";
}
document.getElementById("matrix-a").innerHTML = htmlElements;
} else {
document.getElementById("matrix-a").innerHTML = "<p>Maximum matrix size is 7x7.</p>";
}
}


### Second function

function createMatrixB() {
var i, j;
var htmlElements = "";
var matrixWidth = parseInt(document.getElementById("matrix-width-b").value, 10);
var matrixHeight = parseInt(document.getElementById("matrix-height-b").value, 10);

if (matrixWidth <= 7 && matrixHeight <= 7) {
matrixB = new Array(matrixHeight);
for (i = 0; i < matrixB.length; i++) {
matrixB[i] = new Array(matrixWidth);
}
for (i = 0; i < matrixB.length; i++) {
htmlElements += "<div>";
for (j = 0; j < matrixB[i].length; j++) {
matrixB[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"b" + (i + 1) + (j + 1) + "\" placeholder=\"b" + (i + 1) + (j + 1) + "\" ></div>";
htmlElements += matrixB[i][j];
}
htmlElements += "</div>";
}
document.getElementById("matrix-b").innerHTML = htmlElements;
} else {
document.getElementById("matrix-b").innerHTML = "<p>Maximum matrix size is 7x7.</p>";
}
}


compare the difference and extract the differences into parameters. you can look at this.

function createMatrix(domId) {
var i, j;
var htmlElements = "";
var matrixWidth = parseInt(document.getElementById(domId).value, 10);
var matrixHeight = parseInt(document.getElementById(domId).value, 10);

if (matrixWidth <= 7 && matrixHeight <= 7) {
matrix = new Array(matrixHeight);
for (i = 0; i < matrix.length; i++) {
matrix[i] = new Array(matrixWidth);
}
for (i = 0; i < matrix.length; i++) {
htmlElements += "<div>";
for (j = 0; j < matrix[i].length; j++) {
matrix[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"b" + (i + 1) + (j + 1) + "\" placeholder=\"b" + (i + 1) + (j + 1) + "\" ></div>";
htmlElements += matrix[i][j];
}
htmlElements += "</div>";
}
document.getElementById(domId).innerHTML = htmlElements;
} else {
document.getElementById(domId).innerHTML = "<p>Maximum matrix size is 7x7.</p>";
}
}

createMatrix('matrix-width-a');
createMatrix('matrix-width-b');