Populate input values from MySQL | PHP

I am developing an Interrail Planner for my friends and I use to plan and budget our next summer interrail trip.
I’m developing it with php and mysql (obviously with html css and js for front-end/back-end). I also have a folder inside the project with the names “Testes” so I can develop and try the pages before create the final page and respective css files.

Right now, I am testing part of the page with the personal info of each travelers (still have only the front-end for one, then is just to multiply it).

The connection file (config.php) looks like:

<?php
    define('HOST', 'localhost');
    define('USER', 'root');
    define('PASS', '');
    define('BASE', 'interrail');

    $conn = new MySQLi(HOST, USER, PASS, BASE);

Part of the page test looks like:

<div class="pass-body">
                        <div class="primary-info">
                            <div id="pass-name">
                                <label for="name">Full Name:</label>
                                <input type="text" name="name" id="name" readonly>
                            </div>
                            <div id="pass-birth-date">
                                <label for="birth-date">Birth Date:</label>
                                <input type="date" name="birth-date" id="birth-date" readonly>
                            </div>
                        </div>
                        <div class="fiscal-info">
                            <div class="first-line">
                                <div id="pass-street">
                                    <label for="street">Street:</label>
                                    <input type="text" name="street" id="street" readonly>
                                </div>
                                <div id="pass-no">
                                    <label for="street-no">No.:</label>
                                    <input type="text" name="street-no" id="street-no" readonly>

Part of JS looks like:

<script>
            // Function to fetch user data based on the selected person (button click)
            function fetchUserData(personId) {
                const xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (this.readyState === 4 && this.status === 200) {
                        const data = JSON.parse(this.responseText);
                        if (data) {
                            document.getElementById('name').value = data.name;
                            document.getElementById('birth-date').value = data.birth_date;
                            document.getElementById('street').value = data.street;
                            document.getElementById('street-no').value = data.street_no;
        
                            // Save the filled data to localStorage
                            localStorage.setItem('name', data.name);
                            localStorage.setItem('birth-date', data.birth_date);
                            localStorage.setItem('street', data.street);
                            localStorage.setItem('street-no', data.street_no);
                        }
                    }
                };
                xhr.open('GET', `travelersdata.php?id=${personId}`, true);
                xhr.send();
            }
        
            // Function to retrieve saved data from localStorage and populate the input fields
            function loadSavedData() {
                const name = localStorage.getItem('name');
                const birthDate = localStorage.getItem('birth-date');
                const street = localStorage.getItem('street');
                const streetNo = localStorage.getItem('street-no');
        
                document.getElementById('name').value = name;
                document.getElementById('birth-date').value = birthDate;
                document.getElementById('street').value = street;
                document.getElementById('street-no').value = streetNo;
            }
        
            // Load saved data on page load
            window.addEventListener('load', function () {
                // Call fetchUserData with personId=1 to populate the data for id=1
                fetchUserData(1);
                // Load any previously saved data from localStorage
                loadSavedData();
            });
        
</script>

However, it only populates some of the information (the birth date is not populate) and some of them is populated but as undefined.

I have changed the database columns names and checked and rechecked all the code but nothing has changed.