Creating an editable HTML table from 2D array

(function() {
  /**
   * Default value for Front and Back
   */
  const DEFAULT = {
    front: '',
    back: '',
  }
  
  /**
   * Class Card: using for holding value of front and back.
   * As well as having `update` method to handle new value
   * from input itself.
   */
  class Card {
    constructor({front, back, id} = {}) {
      this.front = front || DEFAULT.front;
      this.back = back || DEFAULT.back;
      this.id = id;
    }
    
    update = (side, value) => this[side] = value;
  }
  
  /**
   * Table Class: handle rendering data and update new value
   * according to the instance of Card.
   */
  class Table {
    constructor() {
      this.init();
    }
    
    /** Render basic table and heading of table */
    init = () => {
      const table = document.querySelector('#table');
      const thead = document.createElement('tr');
      const theadContent = this.renderRow('th', thead, { front: 'Front', back: 'Back' })
      const tbody = document.createElement('tbody');
      
      table.appendChild(theadContent);      
      table.appendChild(tbody);
    }
    
    /** Handling add event from Clicking on Add button
     * Note the `update: updateFnc` line, this means we will refer
     * `.update()` method of Card instance with `updateFnc()`, this is
     * used for update value Card instance itself.
     */
    add = ({front, back, id, update: updateFnc }) => {
      const tbody = document.querySelector('#table tbody');
      const row = document.createElement('tr');
      const rowWithInput = this.renderRow('td', row, {front, back, id, updateFnc});
      tbody.appendChild(rowWithInput);
    }
    
    renderInput = (side, id, fnc) => {
      const input = document.createElement('input');
      input.setAttribute('type','text');
      input.setAttribute('name',`${side}-value-${id}`)
      input.addEventListener('change', e => this.onInputChangeHandler(e, side, fnc));
      
      return input;
    }
    
    renderRow = ( tag, parent, { front, back, id, updateFnc }) => {
      const frontColumn = document.createElement( tag );      
      const backColumn = document.createElement( tag );
      
      /** Conditionally rendering based on `tag` type */
      if ( tag === 'th') {
        frontColumn.innerText = front;
        backColumn.innerText = back;
      }else {
        /** Create two new inputs for each Card instance. Each handle
         * each side (front, back)
         */
        const inputFront = this.renderInput('front', id, updateFnc);
        const inputBack = this.renderInput('back', id, updateFnc);
        
        frontColumn.appendChild(inputFront);
        backColumn.appendChild(inputBack);
      }
      
      parent.appendChild(frontColumn)
      parent.appendChild(backColumn)
      
      return parent;
    }
    
    /** Getting new value and run `.update()` method of Card, now referred as `fnc` */
    onInputChangeHandler = (event, side, fnc) => {
      fnc(side, event.target.value);
    }
  }
  
  class App {
    /**
     * Holding cards data
     * Notice this is an object, not an array
     * Working with react for a while, I see most of the times data as an object works best when it comes to cRUD, this means we don't have to iterate through the array to find the specific element/item to do the work. This saves a lot of time
     */
    cards = {};
  
    constructor(){
      this.domTable = new Table();
      this.domAdd = document.querySelector('#btn-add');
      this.domResult = document.querySelector('#btn-result');
      
      this.domAdd.addEventListener('click', this.onClickAddHandler );
      this.domResult.addEventListener('click', this.onClickResultHandler );
    }
    
    onClickAddHandler = () => {
      const id = uuid();
      const newCard = new Card({id});
      this.cards[id] = newCard;
      this.domTable.add(newCard)
    }
    
    onClickResultHandler = () => {
      /**
       * Using `for ... in ` with object. Or you can use 3rd party like lodash for iteration
       */
      for (const id in this.cards) {
        console.log({
          front: this.cards[id].front,
          back: this.cards[id].back,
          id: this.cards[id].id
        });
      }
    };
  }
 
  // Start the application
  const app = new App();
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js"></script>
<div id="table"></div>
<button id="btn-add">Add</button>
<button id="btn-result">Result</button>