Trivial dynamic table

Builds some JSON from a 2 x 2 dynamic HTML table

HTML

<div id="grid"></div>
<button class="addRow">add</button>
<pre id="json"></pre>

JavaScript

function deleteRow() {
  $(this).parent().remove();
}

function addRow() {
  let newRow = $(`
    <div>
      <input class="key">
      <input class="value">
      <button class='delete'>delete</button>
    </div>`);
  $(this).prev().append(newRow);
  newRow.find('input').on('input', show);
  newRow.find('.delete').click(deleteRow);
}

function show() {
  const grid = $('#grid');
  const result = {};
  grid.find('.key').each((i, e) => {
    const key = $(e).val();
    const value = $(e).next().val();
    if (key && value) {
      result[key] = value;
    }
  });
  $('#json').text(JSON.stringify(result, null, 2));
}

$('.addRow').click(addRow);