Untitled

!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> CRUD</title>
  <style>
    input[type='submit'], button, [aria-label]{
      cursor: pointer;
    }
    #spoiler{
      display: none;
    }
  </style>
</head>
<body>

<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
  <input type="text" id="add-name" placeholder="New Person">
  <input type="submit" value="Add">
</form>

<div id="spoiler" role="aria-hidden">
  <form action="javascript:void(0);" method="POST" id="saveEdit">
    <input type="text" id="edit-name">
    <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">&#10006;</a>
  </form>
</div>

<p id="counter"></p>

<table>
  <tr>
    <th>First Name</th>
    <th>Middle Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Address</th>
    <th>Address</th>
    <th>DOB</th>
    <th>City</th>
    <th>State</th>
    <th>Zip</th>
  </tr>
    <tbody id="People">
    </tbody>
</table>

<script>
var app = new function() {
  this.el = document.getElementById('People');
  this.PeopleFirstName = ['David', 'Morgan', 'John', 'Aaron', 'Billy'];
  this.PeopleLastName=['white','white','jacobs','rodgers','corgan']
  this.Count = function(data) {
    var el   = document.getElementById('counter');
    var name = 'person';
    if (data) {
      if (data > 1) {
        name = 'People';
      }
      el.innerHTML = data + ' ' + name ;
    } else {
      el.innerHTML = 'No ' + name;
    }
  };

  this.FetchAll = function() {
    var data = '';
    if (this.People.length > 0) {
      for (i = 0; i < this.People.length; i++) {
        data += '<tr>';
        data += '<td>' + this.PeopleFirstName[i] + '</td>';
        data += '<td>' + this.PeopleLastName[i] + '</td>';
        data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>';
        data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>';
        data += '</tr>';
      }
    }
    this.Count(this.People.length);
    return this.el.innerHTML = data;
  };
  this.Add = function () {
    el = document.getElementById('add-name');

    var person = el.value;
    if (person) {

      this.People.push(person.trim());

      el.value = '';

      this.FetchAll();
    }
  };
  this.Edit = function (item) {
    var el = document.getElementById('edit-name');

    el.value = this.People[item];

    document.getElementById('spoiler').style.display = 'block';
    self = this;
    document.getElementById('saveEdit').onsubmit = function() {

      var person = el.value;
      if (person) {

        self.People.splice(item, 1, person.trim());

        self.FetchAll();

        CloseInput();
      }
    }
  };
  this.Delete = function (item) {

    this.People.splice(item, 1);

    this.FetchAll();
  };

}
app.FetchAll();
function CloseInput() {
  document.getElementById('spoiler').style.display = 'none';
}
</script>
</body>
</html>