Issue with grabbing data from object

I’m having some trouble getting the right values to show up in this following code. The console log is correct, but when the actual information is being plugged into the page, it’s off by 1.

What I’m hoping to get displayed is:

Name    James   person ID   1
first location  $35
fee amount calculated
fee3    a million in spacecash
Name    Jordan  person ID   2
second location $40
fee amount calculated

Here’s the code:

$(document).ready(function() {
  for (person of personInformation) {
    const personTable = document.createElement("table");
    personTable.innerHTML = "<thead><th id='personName'>Name</th><th id='personId'>person ID</th></thead>";
    personTable.setAttribute("id", "table");

    const newRow = document.createElement("tr");
    newRow.setAttribute("class", "personRow");
    const first_name = document.createElement("th");
    const person_id = document.createElement("th");

    console.log('person', person)

    person_id.textContent = person.person_id;
    first_name.textContent = person.first_name;
    console.log(first_name);
    $("th#personName").after(first_name);
    $("th#personId").after(person_id);
    personTable.appendChild(newRow);
    for (fees of person.fees) {
      const feeRow = document.createElement("tr");
      const fee = document.createElement("td");
      const amount = document.createElement("td");
      fee.textContent = fees.name;
      amount.textContent = fees.amount;
      console.log("fee", fee);
      feeRow.appendChild(fee);
      feeRow.appendChild(amount);
      personTable.appendChild(feeRow);
    }
    console.log(person_id);
    console.log(first_name);
    const persons = document.getElementById('test');
    persons.appendChild(personTable);
  }
  console.log(personInformation);
  $('#personSearch').on('input', function() {
    let value = $(this).val().toLowerCase();
    let searchVal1 = $('.personRow').find('td').text();
    let searchVal2 = $('.personRow').text();
    $('form').filter(function() {

      console.log('searchVal1', searchVal1);
      console.log('searchVal2', searchVal2);
      $(this).toggle($(this).text()
        .toLowerCase().indexOf(value) > 0);
    });
  });
});
<body>
  <div class="container">
    <div class="col-md-12">
      <div class="panel panel-default">
        <div id="test">
        </div>
      </div>
    </div>
  </div>

</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

<script>
  const personInformation = [{
      "person_id": 1,
      "first_name": "James",
      "fees": [{
          "name": "first location",
          "amount": "$35"
        },
        {
          "name": "fee",
          "amount": "amount calculated"
        },
        {
          "name": "fee3",
          "amount": "a million in spacecash"
        }
      ]
    },
    {
      "person_id": 2,
      "first_name": "Jordan",
      "fees": [{
          "name": "second location",
          "amount": "$40"
        },
        {
          "name": "fee",
          "amount": "amount calculated"
        }
      ]
    }
  ];
</script>

Thanks for any suggestions!