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


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

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