Dynamic table creation using Jquery

Dynamic table creation using Jquery

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<br />
<br />
<div id='input_div' name='input_div'>Please Input your Matrix Dimensions :
    <input type="text" id="rowcount" size="2" value="1">
<span>X <input type="text" id="columncount" size ="2" value="1">
</div> <br><br>
<input type="button" id="tablebtn" value="Create Table">
<input type="button" id="newabilitybtn" value="Add Ability">
<input type="button" id="newlevelbtn" value="Add Level">
    <input type="button" id="submit" value="Submit">
<br><br>
<div id="box">
</div>

CSS

table {
	    width:200px;
	    height:200px;
	    border:solid black;
	}
	table td {
	    padding:10px;
	    margin:10px;
	    border:solid black;
	}
	table th {
	    padding:10px;
	    margin:10px;
	    border:solid black;
	}
	table tr {
	    height:10px;
	}

JavaScript

var arr = [{
    val: 1,
    text: 'One'
}, {
    val: 2,
    text: 'Two'
}, {
    val: 3,
    text: 'Three'
}, {
    val: 4,
    text: 'Four'
}];
$("#newabilitybtn").hide();
$("#newlevelbtn").hide();
$("#submit").hide();

$("#tablebtn").click(function () {
    mytable = $('<table></table>').attr({
        id: "MatrixTable"
    });
    var rows = new Number($("#rowcount").val());
    var cols = new Number($("#columncount").val());
    var tr = [];

    for (var i = 0; i < rows; i++) {
        var row;
        if (i == 0) {
            row = $('<tr><th></th><th>Level</th></tr>').attr({
                class: ["Lheader"]
            }).appendTo(mytable);
        }
        row = $('<tr><th>Ability</th>').attr({
            class: ["Aheader"]
        }).appendTo(mytable);

        for (var j = 0; j < cols; j++) {
            var td;
            td = $('<td>').attr({
                class: ["matrix_row"]
            }).appendTo(row);
            var input = $("<input type='text'>").appendTo(td);
            input.autocomplete({
                source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
            });
            /*var sel = $('<select />').attr({ class: ["matrix"], text:'Elway',id: "MatrixTable"+"_"+i+"_"+j  }).appendTo(td);
            $(arr).each(function() {
                sel.append($("<option>").attr('value',this.val).text(this.text));
            });  */

            $('<br><br><span>').attr({
                'class': 'rubric_span'
            }).html('Selected: ').appendTo(td);
            // $('#rubric_name').html(span);
            $('</span>').appendTo(row);
            $('</td>').appendTo(row);
        }
        $('</tr>').appendTo(row);
    }
    //console.log("TTTTT:"+mytable.html());
    mytable.appendTo("#box");
    $("#tablebtn").hide();
    $("#input_div").hide();
    $("#newabilitybtn").show();
    $("#newlevelbtn").show();
    $("#submit").show();
});

$("#newabilitybtn").click(function () {
   ...