Fill bootstrap 5 modal with mysql record data using javascript fetch/ async/await with ES6 notation so as to update the record

Question

All of this code works. It activates the BS5 modal and fills it with a record using a stored procedure on MySQL db. The issue was calling the wrong variable. If you set up a 'sync' variable, then 'await' has to use the same variable (my bad), or you break the 'promise' function. Also, I had to jason_encode my PHP PDO output into a separate array for that purpose, and useht 'data.json' on to catch the response, and name the variables properly. Once organized properly, it works verywell. Success with fetch-api. I can now do complete CRUD with the fetch-api, php pdo, stored procedures, and MySQL.

    <?php
    include "init.php";
    $P1  = $_GET['userId'];
    $stmt = $pdo->prepare("CALL readSingleUserSp(?)");
    $stmt>bindParam(1,$P1,PDO::
    PARAM_STR|PDO::PARAM_INPUT_OUTPUT|PDO::ATTR_EMULATE_PREPARES, 
    4000);
    $stmt->execute(array($P1)); 
    do {
    $res = $stmt->fetchAll();
    }   while ($stmt->nextRowset() && $stmt->columnCount());

    foreach ($res as $row) {
        $userId = $row['userId'];
        $fName  = $row['fName'];
        $lName  = $row['lName'];
        $email  = $row['email'];
        $phone  = $row['phone'];
    }
 
    $userinfo = array(  'userId'=>$userId,
                    'fName' =>$fName,
                    'lName' =>$lName,
                    'email' =>$email,
                    'phone' =>$phone);
    echo json_encode($userinfo);
    ?>

    const tbody = document.querySelector("tbody");  
    const addModal = document.getElementById("addNewUserModal");
    const addForm = document.getElementById("add-user-form");
    const updateForm = document.getElementById("edit-user-form");
    // Edit User Ajax Request
    tbody.addEventListener("click", (e) => {
    if (e.target && e.target.matches("a.editLink")) {
    e.preventDefault();
    let userId = e.target.getAttribute("userId");
    editUser(userId);
    }
    });

   `const editUser = async (userId) => {
    const data = await fetch(`includes/readsingleuser.php? 
    &userId=${userId}`, {
    method: "GET",
    });
      const userinfo = await data.json();
      document.getElementById("userIdEdit").value = 
    userinfo.userId;
      document.getElementById("fNameEdit").value =  userinfo.fName;  
      document.getElementById("lNameEdit").value =  userinfo.lName;
      document.getElementById("emailEdit").value =  userinfo.email;
      document.getElementById("phoneEdit").value =  userinfo.phone;
    };

Answer 1

"All of this code works. It activates the BS5 modal and fills it with a record using a stored procedure on MySQL db. The issue was calling the wrong variable. If you set up a 'sync' variable, then 'await' has to use the same variable (my bad), or you break the 'promise' function. Also, I had to Jason_encode my PHP PDO output into a separate array for that purpose, and use the 'data.json' to catch the response, and name the variables properly. Once organized properly, it works very well. Success with fetch-API. I can now do complete CRUD with the fetch-API, PHP pdo, stored procedures, and MySQL." I changed the original code to shorten the question as Stack bots were complaining.