Однопользовательское приложение Electron, позволяющее выполнять базовые операции CRUD с таблицей (хранящейся в JSON)

Я новичок в JavaScript и буду благодарен за ваши комментарии к моему приложению Electron (электрон — это JS-фреймворк, позволяющий создавать настольные приложения).

Мне нужно было создать приложение, которое хранит небольшую базу данных и позволяет мне выполнять простые операции с данными. Я просто включаю здесь небольшую часть этого приложения, которое включает в себя только базовую функциональность CRUD в одной таблице. Таблица сериализуется в teams.json файл со следующей структурой:

[
    {
        "name": "Blue",
        "gold": 0,
        "food": 0,
        "fame": 0
    },
    {
        "name": "Red",
        "gold": 0,
        "food": 0,
        "fame": 0
    },
    {
        "name": "Green",
        "gold": 0,
        "food": 0,
        "fame": 0
    }
]

В приложении всего два экрана. Первый экран — это просто целая таблица. Второй экран позволяет вносить изменения (см. Рисунок).

Экран редактирования состоит из двух основных частей:

1. Чтение из JSON и построение HTML
2. Сериализация в JSON

1. Чтение и построение

function create_team(team) {
  var div_team = document.createElement("div");
  div_team.setAttribute("id", "team");
  var div_html_string = "<textarea class='divedit_str'>" + team.name + "</textarea>"
  div_html_string += "<textarea class='divedit'>" + team.gold + "</textarea>";
  div_html_string += "<textarea class='divedit'>" + team.food + "</textarea>";
  div_html_string += "<textarea class='divedit'>" + team.fame + "</textarea>";
  div_team.innerHTML = div_html_string;

  var remove_button = document.createElement("button");
  remove_button.setAttribute("class", "remove")
  remove_button.innerHTML = "Remove";
  remove_button.addEventListener("click", (e) => {
    e.target.parentElement.remove();
  })
  div_team.appendChild(remove_button)

  return div_team;
}

function loading_panels() {
  teams = JSON.parse(fs.readFileSync('./app/teams.json').toString());

  //// loading view teams panel
  teams.forEach((team) => {
    div_teams.appendChild(create_team(team));
  });
}

2. Сериализация

button_teams.addEventListener('click', () => {
  var teams_div = document.querySelectorAll("div#team");
  var json_teams = [];
  teams_div.forEach((team) => {
    json_teams.push({ "name": team.children[0].value, "gold": Number(team.children[1].value), "food": Number(team.children[2].value), "fame": Number(team.children[3].value) });
  });
  fs.writeFileSync('./app/teams.json', JSON.stringify(json_teams), function (err) {
    if (err) throw err;
  });
  window.location.replace("./index.html");
});

Рабочий код можно найти в этот репозиторий GitHub.

Поскольку это обычная проблема MVC, мне любопытно, есть ли решение, в котором я могу разделить представление и основную логику. Не обращайте внимания на CSS приложения. Я не фронтенд-разработчик, поэтому считаю, что стили полностью неправильные.

Спасибо за комментарии!