Create two arrays duplicate code

Question

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>";
 }
}

Answer 1

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');