返回mysql获取数据并插入表单字段值

Question

i have a list of clients on a page, each client has an icon to click on to edit the client details.

<i class="fas fa-user-edit gray openModal" data-modal="modal2" client="'.$client['id'].'"></i>

Everything is good up to this point. click the icon the proper modal opens and it triggers the js file just fine. (I did alot of console logs to ensure). The client variable in my jquery file holds fine and i'm able to get it passed to the php file.

in the php file i'm able to pull the information into an array and i was able to just echo the $client['firstName'] and have it show in the console.

when i moved to getting that information and parse it as the Json is when i got lost. Can someone please help me take my result and load into my form fields. The code i have now may be totally off because i've been playing with different code from different searches.

form (shortened to two fields for ease of example)

<form id="form" class="editClient ajax" action="ajax/processForm.php" 
method="post">

<input type="hidden" id="refreshUrl" value="? 
page=clients&action=view&client=<?php echo $client['id'];?>">
<input type="hidden" name="client" value="<?php echo $client['id'];?>">

<div class="title">
    Client Name             
</div>



<div class="row">

    <!-- first name -->
    <div class="inline">
        <input type="text" id="firstName" name="firstName" value="<?php echo $client['firstName']; ?>" autocomplete="nope" required>
        <br>
        <label for="firstName">First Name<span>*</span></label>
    </div>
<!-- last  name -->
    <div class="inline">
        <input type="text" id="lastName" name="lastName" value="<?php echo $client['lastName']; ?>" autocomplete="nope" required>
        <br>
        <label for="lastName">Last Name<span>*</span></label>
    </div>

</form>

javascript/jquery file

$('.openModal').on('click', function() {

  //$('body, html, div').scrollTop(0);

  var that = $(this),
  client = that.attr('client');

  $.ajax({

    type: "post",
    url: "ajax/getClient.php",
    data: {id:client},
    success: function(response){

      var result = JSON.parse(response);
      var data = result.rows;

      $("#firstName").val(data[0]);

    }
  })

  });

php file

<?php

include('../functions.php');

$sql = 'SELECT * FROM clients WHERE id="'.$_POST['id'].'"';
$result = query($sql);
confirmQuery($result);

$data = fetchArray($result);

echo json_encode(['response' => $data, 'response' => true]);

?>

UPDATED ----------

Here is my final js file that allowed my form values to be set.

$('.openModal').on('click', function() {



var that = $(this),
        client = that.attr('client');

        $.ajax({

            type: "post",
            url: "ajax/getClient.php",
            data: {id:client},
            success: function(response){

            var result = JSON.parse(response);


                    $("select#primaryContact").append( $("<option>")
                    .val(result[0].primaryContact)
                        .html(result[0].primaryContact)
                    );
                $("select#primaryContact").append( $("<option>")
                    .val("")
                        .html("")
                    );
                if (result[0].email !== "") {
                    $("select#primaryContact").append( $("<option>")
                    .val(result[0].email)
                        .html(result[0].email)
                    );
                }
                if (result[0].phoneCell !== "") {
                    $("select#primaryContact").append( $("<option>")
                    .val(result[0].phoneCell)
                        .html(result[0].phoneCell)
                    );
                }
                    if (result[0].phoneHome !== "") {
                    $("select#primaryContact").append( $("<option>")
                    .val(result[0].phoneHome)
                        .html(result[0].phoneHome)
                    );
                }



                     $("input#firstName").val(result[0].firstName);
                     $("input#lastName").val(result[0].lastName);
                     $("input#address").val(result[0].address);
                     $("input#city").val(result[0].city);
                     $("input#zip").val(result[0].zip);
                     $("input#email").val(result[0].email);
                     $("input#phoneCell").val(result[0].phoneCell);
                     $("input#phoneHome").val(result[0].phoneHome);
                     $("input#phoneFax").val(result[0].phoneFax);
                     $("input#source").val(result[0].source);
                     $("input#referBy").val(result[0].referBy);
                     $("input#client").val(result[0].id);

        }



        })

        });