JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h1>Martix editor</h1>
      <ol class="text-danger">
        <li>Generate the matrix</li>
        <li>Click on field to edit!</li>
      </ol>

      <button class="btn btn-success" id="matrix-generator">(Re-)Generate 10 x 10 matrix</button>
      <hr/>
      <div id="matrix-wrapper"></div>
      <button class="btn btn-danger" id="matrix-submit">Отправить</button>

JavaScript

$(document).on('click', '#matrix-generator', function(){
    $("#matrix-wrapper").html(genMatrix(10, 10));
});


function genMatrix(rows, cols){
    var table = document.createElement('table');
    //var $table = $('<table />'); 
//мы ведь изначально знаем размер матрицы? для чего while? for (..) очевиднее же
    while (rows-- > 0) {
        var tr = table.insertRow();
	// var $tr = $('<tr />').appendTo($table);
        while (cols-- > 0) {
            var td = tr.insertCell();
	    // $td = $('<td />').appendTo($tr);
            var rnd = Math.floor((Math.random() * 100) + 1);
	    //здесь нужна праверка на уникальность

            td.appendChild(document.createTextNode(rnd));
            td.className = 'editable';
            td.id = i + "-" + j; //идентификатор не может начинаться с числа

	    // $td.append(rnd).data('i', i).data('j', j)
            
        }
    }
    return table;
    //$table.appendTo($("#matrix-wrapper"));
}

$(document).on('click', '.editable', function(){
    var name = $(this).text();
    var thisId = $(this).attr('id');
    $(this).html('');
    $('<input></input>')
        .attr({
            'size': 3,
            'type': 'text', //может number?
            'name': 'cell-n-' + thisId, // у нас ведь двумерный массив и мы хотим отправить его на сервер стандартным способом, может лучше cell[i][j]
            'id': 'cell-n-' + thisId,
            'class': 'editable-input',
            'value': name
        })
        .css("position", "absolute")
        .appendTo($(this));
    
    $('#cell-n-' + thisId).focus();
});

$(document).on('blur','.editable-input', function() {
    var name = $(this).val();
    $(this).parent().text(name); // kind of bad idea =\
});

$(document).on('click', '#matrix-submit', function() {
    
    var exportObj = {};

    // Very simple validation
    if ($(".editable").length > 0) {
        
        // parse values from DOM
        $(".editable").each(function() {
            exportObj[this.id] =...