I am trying to implement a way of getting data from an input box and send the data to a json array, i achieved it but the previous data in the array got removed when pushing a new one. I want all the data to store in the json array. How to achieve this in javascript or jquery. Below is what i have tried.

```
<script>
  $(document).ready(() => {
    $('#submit').click(() => {
      var objKey = 0;
      var person = [];

      var name = $('#name').val();
      var age = $('#age').val();
      var address = $('#address').val();
      objKey++;
      var obj = {
        'id': objKey,
        'name': name,
        'age': age,
        'address': address
      }

      var hasMatch = false;

      if (name === '' || age === '' || address === '') {
        alert('Fields should not be null');
        return false;
      } else {
        var index = 0;
        if (index < person.length) {
          ++index

          var animal = person[index];

          if (animal.name == obj.name) {
            hasMatch = true;
            alert('oops');
            return false;
          } else {
            person.push(obj);
            buildTable(person)
            console.log(person);
            return false

          }
        } else {
          person.push(obj);
          buildTable(person)
          console.log(person);
          person += person
          return false
        }

      }

    });

    function buildTable(data) {
      var table = document.getElementById('myTable')

      for (var i = 0; i < data.length; i++) {
        var row =
          `<tr class="record">
             <td>${data[i].id}</td>
             <td>${data[i].name}</td>
             <td>${data[i].age}</td>
             <td>${data[i].address}</td>
             <td><input type="button" title="Click to remove item" value="delete" /></td>
          </tr>`
        table.innerHTML += row`enter code here`
      }
    }
  })
</script>

```