Reloading relevant results only after CRUD request completed

Question

I'm developing a CRUD app for a company to keep track of its employees. The content must refresh after a CRUD operation has been completed ie. when an employee has been added the employee results must update, but the entire page must not reload. I've tried using the $('#employee-results').load('php/getAll.php'); etc but this just dumps the whole response text in the div when I need to use the response to reload the content like its shown when employee data is retrieved on page load below:

function getEmployeeData() {
  $.ajax({
    type: "GET",
    url: "php/getAll.php",
    dataType: "json",
    success: function(data){
      let employees = data.data;
      
      currentData = employees;

      employees.forEach(function(position){

        $("#employee-results").append(`<div class="card" style="width: 18rem;">
          <div class="card-body">
            <div class="individual-result"><i class="fa-solid fa-user fa-xl"></i><h5 class="card-title record"><span id="first-name-${position.id}">${position.firstName}</span>&nbsp<span id="last-name-${position.id}">${position.lastName}</span></h5></div>
            <div class="individual-result"><i class="fa-solid fa-id-badge"></i><h6 id="employee-id-${position.id}" class="card-subtitle mb-2 text-muted record">${position.id}</h6></div>
            <div class="individual-result"><i class="fa-solid fa-at"></i><p id="email-${position.id}">${position.email}<p></div>
            <div class="individual-result"><i class="fa-solid fa-briefcase"></i><p id="jobTitle-${position.id}">${position.jobTitle}<p></div>
            <p id="department-id-${position.id}" class="department-id">${position.departmentID}</p>
            <div class="dept-location"><div class="individual-result"><i class="fa-solid fa-building"></i><h6 class="record" id="department-${position.id}">${position.department}</h5></div>
            <div class="individual-result"><i class="fa-solid fa-map-location"></i><h6 class="record" id="location-${position.id}">${position.location}</h5></div>
            
          </div>
          <button id="${position.id}" class="edit-employee-button" data-bs-toggle="modal" data-bs-target="#editEmployeeModal" onclick="populateEditModalWithCurrentInfo(this.id);"><i class="fa-solid fa-pen-to-square"></i></button>
          </div>
        </div>`);
    
      })
    }
  })
}

I'm sure I am close with the jQuery .load() method but I'm not sure how I harness it to achieve what is needed.