PHP & JavaScript says user’s email already exists in the database upon submit when its not

i’m trying to learn some php and after creating a php script that checks for email duplicates in the database I’m getting en error message that says the email entered is already in the database when its clrearly not, and I’m using AJAX to check the form and output some messages in the form itself, can you guys help me ? tried everything and it still says user email exists when its not

PHP CODE (removed the db info):

<?php
// Database connection
$servername = "";
$username = "";
$password = "";
$dbname = "";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Form submission handling
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Retrieve form data
    $email = trim($_POST['email']);
    $username = $_POST['username'];
    $password = $_POST['password'];
    $phone = $_POST['phone'];

    // Check if email already exists in the database
    $checkDuplicateEmailQuery = $conn->prepare("SELECT * FROM users WHERE email = ?");
    $checkDuplicateEmailQuery->bind_param('s', $email);
    $checkDuplicateEmailQuery->execute();
    $result = $checkDuplicateEmailQuery->get_result();

    if ($result->num_rows > 0) {
        echo json_encode(array('error' => 'The email address already exists. Please use a different email.'));
    } else {
        // Hash the password
        $hashedPassword = password_hash($password, PASSWORD_DEFAULT);

        // Insert user data into the database with hashed password using prepared statement
        $insertQuery = $conn->prepare("INSERT INTO users (username, password, phone, email) VALUES (?, ?, ?, ?)");
        $insertQuery->bind_param("ssss", $username, $hashedPassword, $phone, $email);

        if ($insertQuery->execute()) {
            echo json_encode(array('message' => 'User created successfully'));
        } else {
            echo json_encode(array('error' => 'Error in inserting user data'));
        }
    }

    // Close database connection
    $conn->close();
}

the JS code:

document.getElementById('registrationForm').addEventListener('submit', function(event) {
    event.preventDefault();

    var email = document.getElementById('email').value.trim(); // Trim the email input to remove leading/trailing spaces
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    var phone = document.getElementById('phone').value;

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'api/register.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.hasOwnProperty('error')) {
                    document.getElementById('error-message').innerText = response.error;
                } else if (response.hasOwnProperty('message')) {
                    alert(response.message);
                    // Additional actions for success case      
                } else {
                    alert('Unexpected response from server');
                }
            } else {
                alert('Error: ' + xhr.status);
            }
        }
    };

    var formData = 'email=' + encodeURIComponent(email) + '&username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password) + '&phone=' + encodeURIComponent(phone);

    xhr.send(formData);
});

I have tried to remove the js itself and it works as intended but when I add the js back it breaks again I CANNOT understand why…