Dictionary editor

index.html

<div id="dict-container"></div>
<button id="dict-add" class="btn btn-primary">Add</button>
<button id="dict-clear" class="btn btn-danger">Clear all</button>

index.js

$(function () {
  // ****************************************************
  // * Print dict values form the DB here
  var initialDict = {
      Name: 'Sergei',
      Platform: 'Wrapbootstrap',
      Type: 'author',
  };
  // ****************************************************
  
  function addPair(key, value) {
    $('#dict-container').append(
      '<div class="dict-item">' +
        '<div class="form-row">' +
          '<div class="col-4"><label class="form-label">Key</label><input type="text" class="form-control" value="' + key + '"></div>' +
          '<div class="col-4"><label class="form-label">Value</label><input type="text" class="form-control" value="' + value + '"></div>' +
          '<div class="col-4"><label class="form-label d-block">&nbsp;</label><button class="remove-btn btn btn-danger">Remove</button></div>' +
        '</div>' +
        '<hr>' +
      '</div>'
    );
  }

  function removePair() {
    $(this).parents('.dict-item').remove();
  }

  // Initialize
  //

  // "Remove" button click
  $('#dict-container').on('click', '.remove-btn', removePair);

  // "Add" button click
  $('#dict-add').on('click', function() {
    addPair('', '');
  });

  // "Clear" button click
  $('#dict-clear').on('click', function() {
    $('#dict-container').html('');
  });

  // Show initial dict elements
  Object.keys(initialDict).forEach(function(key) {
    addPair(key, initialDict[key]);
  });
  
  // After all, send updated data to the server via AJAX on each dict change
  // or create "Save" button and set "name" attributes to inputs
});