Refresh Table After Form Submit PHP & Javascript

I’m unsure how much code is needed to illustrate my problem. If you need more, please ask!

I have a table that’s created with a php function. It pulls all of a user’s records based on their ID.

I also have a form that calls a javascript function when submitted. This function contains validation, then creates a XMLHttpRequest that submits the form values to insert_into.php and then changes the .innerHTML of a span to show a success message.

Everything so far works great!

Now the annoying bit: I want to refresh the .innerHTML of "myTable" with the new info that was just submitted to the database. I can get my code to output a second table with the new info, but I’ve been wholly unsuccessful in getting it to update the .innerHTML and I’m going crazy.

This is the part that I think is causing the issue:

var xhttp = new XMLHttpRequest();

//create the function to be executed when the server response is ready
xhttp.onreadystatechange = function() {
    if (xhttp.readyState === XMLHttpRequest.DONE) {
        if (xhttp.status === 200) {
            document.getElementById("form_message_hybrid").innerHTML = this.responseText;
        
            //second XMLHttpRequest object, to update table
            var xhttp2 = new XMLHttpRequest();
        
            //handle second server response
            xhttp2.onreadystatechange = function() {
                if (xhttp2.readyState === XMLHttpRequest.DONE) {
                    if (xhttp2.status === 200) {
                        var updatedTable = xhttp2.responseText;
                
                        document.getElementById("myTable").innerHTML = this.responseText;
                    }//if xhttp2 readstate close
                    else {
                        alert("Error updating myTable. Status: " + xhttp2.status);
                    }
                }
            };//xhttp2 function close
        
            xhttp2.open("GET", "query.php?action=hybridsTable", true);
            xhttp2.send();
        }//first if statement close
        else {
            alert("Error inserting record.  Status: " + xhttp.status);
        }
    }
};//xhttp.onreadystatechange close

//prepare send to insert_into.php file with the entered variables
xhttp.open("GET", "insert_into.php?parent_one=" + parent_one + "&parent_two=" + parent_two + "&hybrid_name=" + hybrid_name + "&animal_name=" + animal_name + "&animal_location=" + animal_location, true);

//send the variables to the php file, form will either reset and display a
//sucess message, or fail verification
xhttp.send();

php:

function hybridsTable() {
    $conn = conn();
    global $userID;
    
    $sql = "SELECT * FROM hybrids WHERE fk_hybrids_users = " . $userID;
    $results = $conn->query($sql);
    $output = "<table class='table' id='myTable'><tr><th>Parent One</th><th>Parent Two</th><th>Species</th><th>Name</th><th>Location</th>";
    
    
    if ($results && $results->num_rows > 0) {
        while ($row = $results->fetch_assoc()) {
            $output .= "<tr>";
            $output .= "<td>" . $row['hybrids_parent_one'] . "</td>";
            $output .= "<td>" . $row['hybrids_parent_two'] . "</td>";
            $output .= "<td>" . $row['hybrids_hybrid_name'] . "</td>";
            $output .= "<td>" . $row['hybrids_animal_name'] . "</td>";
            $output .= "<td>" . $row['hybrids_animal_location'] . "</td>";
            $output .= "<td>" . "</td>";
            $output .= "</tr>";
        }
    } else {
        $output .= "<tr><td colspan='4'>No results found.</td></tr>";
    }

   $output .= "</table>";

    echo $output;
}

Things that I can eliminate:

1. Database connection issues. All my code uses the same connection, everything else works fine, and even if it didn’t I can consistently produce the table, just not in the right place!

2. Some other issue with making the table itself, see above.

3. The table id is definitely myTable, both the one that’s supposed to be there and the second one that variations of the code have produced.

4. Placing the xhttp2 section outside of the xhttp if statement doesn’t seem to help.

5. I’ve tried both echo and return for the $output variable in the php code.