Tambah data dengan modal bootstrap

I've got a basic bootstrap-table displayed. When I click on a cell, I'd like a modal to open with the deviceId of that row, and the results of the "function" cell. If there is nothing in the "function" cell, the modal would still load and allow me to enter data for that cell. Once the modal is open, I'd like to either edit and then save the data, or cancel. I've reviewed several of the other questions asked on this forum, but none seem to have the answer. The modal loads, but there is no data there to edit. The correct data is being returned via php (I can see this in Firefox' console), but nothing is displayed).

Here is my table:

<div class="container">
        <div class="row-fluid">
        
            <div class="col-xs-6">
                <div class="table-responsive">
            
                <table class="table table-responsive table-striped" 
                    id="scandata"
                    sortName="deviceId"
                    sortOrder="desc"
                    data-toggle="table"
                    data-detail-view="true"
                    data-detail-formatter="detailFormatter"
                    data-filter-control="true"
                    data-pagination="true">
                    <thead class="table-dark">
                    <tr>
                        <th data-name="deviceId" data-field="deviceId" data-visible="false">ID</th>
                        <th data-name="hostname" data-field="hostname_id" data-sortable="true" data-filter-control="input" data-align="center">Hostname</th>
                        <th data-name="ipAddr" data-field="ip_id" data-sortable="true" data-filter-control="input" data-align="center">IP</th>
                        <th data-name="macAddr_id" data-field="macAddr_id" data-sortable="true" data-filter-control="input" data-align="center">Mac Address</th>               
                        <th data-name="openPorts" data-field="openPorts" data-sortable="true" data-filter-control="input" data-align="center">Open Ports</th>               
                        <th data-name="network" data-field="network" data-sortable="true" data-filter-control="input" data-align="center">Network</th>               
                        <th data-name="status" data-field="status" data-sortable="true" data-filter-control="input" data-align="center">Status</th>               
                        <th data-name="functionData" data-field="functionData" data-sortable="true" data-filter-control="input" data-align="center">Function</th> 
              
                    </tr>
                    </thead>
                    <tbody>
                <?php
                    while($row = $result->fetch_assoc()) {  ?>
                            
                        <tr>

                        <td><?php echo $row["deviceId"]; ?></a></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["hostname"]; ?></td>
                        <td data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo long2ip($row["ip"]); ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["macAddr"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["openPorts"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["network"]; ?></td>
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["status"]; ?></td>
                        <!-- <td><a href="" data-type="text" data-abc="true" data-pk="<?php echo $row['deviceId']; ?>"><?php echo $row["functionData"]; ?></a></td> -->
                        <td data-type="text" data-pk="<?php echo $row['deviceId']; ?>" data-abc="true"><?php echo $row["functionData"]; ?></td>
                    
                        </tr>

                <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>

And my modal:

<div class="modal fade drop-shadow" id="myModal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h2>Function</h2>
                <button type="button" class="close" data-dismiss="modal">&times;</button> 
                <!-- <h4 class="modal-title">Notification</h4>                                                              -->
            </div> 
            <div class="modal-body">
                <form action="update.php" id="save-form">
                    <div class="col-md-10 m-auto">
                        <div class="form group">
                            <label for="functionData"></label>
                            <input class="form-control" type="text" name="functionData" id="functionData">
                            <!-- <input class="modalTextinput form-control" type="text" name="deviceId" id="deviceId" > -->
                        </div>
                    </div>  
                </div> 
                <div class="modal-footer">
                    <!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cancel</button>    -->
                    <button type="button" id="save-btn" class="btn btn-primary">Save Changes</button>                               
                                
                </div>
            </form>
        </div>                                                                       
    </div>  
</div> 

This is my jquery to load the modal, which is does. The problem is it does not load the cell data.

$('#scandata').on('click-cell.bs.table', function (field, value, row, $el) {
  if ( value == "functionData") {
 
    // alert($el.deviceId+"-"+$el.functionData);
    let deviceId = $el.deviceId;
    let functionData = $el.functionData;
    $.ajax({
      url: 'getFunctionData.php',
      type: 'post',
      data: {deviceId: deviceId, functionData:functionData},
      success: function(response){ 
        // Add response in modal body
        $('.functionData').val(response.functionData);
        $('#myModal').modal('show'); 
      }
    });
  }
});

And my getFunctionData.php:

if ( $stmt = $connection->prepare($functionQuery)) {
    $stmt->bind_param("i", $deviceId);
    $stmt->execute();
    $stmt->bind_result($functionData);
}

echo json_encode($functionData);