When there is only one order present in my database, the “Approve” and “Cancel” buttons do not function as expected. However, if there are multiple orders in the database, these buttons work properly

java script

function fetchOrders(status) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'fetch_pending_orders.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onload = function() {
      if (xhr.status === 200) {
        // Insert fetched orders as cards into the orderCards container
        document.getElementById('orderCards').innerHTML = xhr.responseText;
      }
    };
    xhr.send('product_status=' + status);
  }

back end

$status = $_POST['product_status'] ?? 'Pending';

if ($status == 'all') {
    $sql = "SELECT *,
               IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
        FROM tbl_orders
        WHERE payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
} elseif ($status == 'To Pay') {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE (product_status IS NULL OR product_status = '') AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
} elseif ($status == 'To Deliver') {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE product_status = 'Approved' AND order_type = 'To Deliver' AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
}  elseif ($status == 'To Pickup') {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE product_status = 'Approved' AND order_type = 'To Pickup' AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
} elseif ($status == 'Completed') {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE product_status = 'Completed' AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
} elseif ($status == 'Cancelled') {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE product_status = 'Cancelled' AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
} else {
    $sql = "SELECT *, 
                   IF(product_status IS NULL OR product_status = '', 'Pending', product_status) AS computed_status
            FROM tbl_orders 
            WHERE order_type = ? AND payment_method IS NOT NULL AND payment_method != ''";
    $stmt = $db->prepare($sql);
    $stmt->bind_param('s', $status);
}

// Execute the statement and fetch results
$stmt->execute();
$result = $stmt->get_result();

$output = '';
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
    $order_id = $row['order_id'];
    
    $output .= '<div class="order-card" style="display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; margin-bottom: 10px;">';

    // Product Image
    $output .= '<div class="product-image" style="flex: 1;">';
    $output .= '<img src="../variety_pictures/' . htmlspecialchars($row['variety_image']) . '" alt="Product Image" style="width: 100%;">';
    $output .= '</div>';

    // Product Details
    $output .= '<div class="order-info" style="flex: 2; padding-left: 20px;">';
    $output .= '<h2 style="margin: 0 0 10px 0;">' . htmlspecialchars($row['variety_name']) . '</h2>';
    $output .= '<p>Quantity: ' . htmlspecialchars($row['quantity']) . '</p>';
    $output .= '<p>Order Total: ₱ ' . number_format($row['total_price'], 2) . '</p>';
    $output .= '<p>Product Status: <strong>' . 
    (!empty($row['computed_status']) ? htmlspecialchars($row['computed_status']) : 'Pending') . 
    '</strong></p>';

    $output .= '<p>Payment Method: ' . htmlspecialchars($row['payment_method']) . '</p>';
    $output .= '<p>Order Option: ' . htmlspecialchars($row['order_type']) . '</p>';
    $output .= '</div>';

    // Receiver and Actions
    $output .= '<div class="order-actions" style="flex: 1; text-align: left;">';
    $output .= '<p>Order ID: ' . htmlspecialchars($row['order_id']) . '</p>';
    $output .= '<p>Receiver Name: ' . $receiver_name . '</p>';
    $output .= '<p>Contact: ' . htmlspecialchars($row['phoneNumber']) . '</p>';
    $output .= '<p>Address: ' . htmlspecialchars($row['address']) . '</p>';
    
    // Show "View Payment" button only if payment_method is "Online Payment"
    if ($row['payment_method'] === 'Online Payment') {
      $output .= '<button type="button" class="btn btn-secondary w-100 mb-3" onclick="viewPayment(' . $row['order_id'] . ')">View Payment</button>';
    }

    if ($row['product_status'] == 'Completed') {
      // Display only the "Completed" status without buttons
      $output .= '<p><strong>Order Status:</strong> Completed</p>';
    } elseif ($row['product_status'] == 'Cancelled') {
      // Display only the "Cancelled" status without buttons
      $output .= '<p><strong>Order Status:</strong> Cancelled</p>';
    } else {
      // Approve and Deny Buttons for other statuses
      $output .= '<form method="POST" action="update_order_status.php">';
      $output .= '<input type="hidden" name="order_id" value="' . $row['order_id'] . '">';
      $output .= '<button type="submit" class="btn btn-success w-100 mb-3 ml" name="product_status" value="Approved">Approve</button><br>';
      $output .= '<button type="submit" class="btn btn-danger w-100 ml" name="product_status" value="Cancelled">Deny</button>';
        $output .= '</form>';
    }

    $output .= '</div>';
    $output .= '</div>';
}

echo $output;

} else {
    $output = '<p>No orders found for ' . htmlspecialchars($status) . '</p>';
}

<?php
require '../config.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $order_id = $_POST['order_id'] ?? null;
    $product_status = $_POST['product_status'] ?? null;

    if (in_array($product_status, ['Approved', 'Cancelled'], true)) {
        $sql = "UPDATE tbl_orders SET product_status = ? WHERE order_id = ?";
        $stmt = $db->prepare($sql);
        $stmt->bind_param('si', $product_status, $order_id);

        if ($stmt->execute()) {
            echo json_encode(['success' => true, 'message' => 'Order status updated successfully.']);
            header('location: pending.php');
            exit();
        } else {
            echo json_encode(['success' => false, 'message' => 'Failed to update order status.']);
            header('location: pending.php');
            exit();
        }
    } else {
        echo json_encode(['success' => false, 'message' => 'Invalid status value.']);
    }
}

?>

Even if there is only one order present in the database, I expect the “Approve” and “Cancel” buttons to function correctly, just as they do when multiple orders are present.