XMLHttpRequest on Laravel to complete fields based on user input

I have been trying to create an XMLHttpRequest to fetch data on mySQL based on 2 tables, but I can't get it to work properly as the beginner I am, so after a few days I wanna ask you for help

This is how I tried to do this, I'll change a few names as the code belongs to a company, they'll be highlighted with "*":

form

        <div class="col-md-3">
        <div class="position-relative form-group">
            <label class="">*number* - *name*</label>
            <select name="*first input*" id="*first input*" required="required" placeholder="" onchange="GetDetail(this.value)" class="form-control *select class*">
                <option></option>
                @foreach($properties as $prop)
                    <option  value="">  - </option>
                @endforeach
            </select>    
            </select>

this is the XMLHttpRequest function:

function GetDetail(str) {
    if (str.length == 0) {
        document.getElementById("*column1*").value = "";
        document.getElementById("*column2*").value = "";
        document.getElementById("*column3*").value = "";
        document.getElementById("*column4*").value = "";
        document.getElementById("*column5*").value = "";
        document.getElementById("*column6*").value = "";
        document.getElementById("*column7*").value = "";
        document.getElementById("*column8*").value = "";
        document.getElementById("*column9*").value = "";
        document.getElementById("*column10*").value = "";
        return;
    }
    else {

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {

            if (this.readyState == 4 && 
                    this.status == 200) {
                        
                var myObj = JSON.parse(this.responseText);

                document.getElementById("*column1*").value = myObj[0];
                document.getElementById("*column2*").value = myObj[1];                 
                document.getElementById("*column3*").value = myObj[2];
                document.getElementById("*column4*").value = myObj[3];
                document.getElementById("*column5*").value = myObj[4];
                document.getElementById("*column6*").value = myObj[5];
                document.getElementById("*column7*").value = myObj[6];
                document.getElementById("*column8*").value = myObj[7];
                document.getElementById("*column9*").value = myObj[8];
                document.getElementById("*column10*").value = myObj[9];    
            }else{
                console.log();("error " + xmlhttp.status);
            }
        };

        xmlhttp.open("GET", "client/for-ajax.blade.php/" +str, true);

        xmlhttp.send();
    }
}

and this is the for-ajax file, which was originally .php, but I tried changing it to .blade.php:

<?php

$prop_id = $_REQUEST['property_id'];
  
$conn = mysqli_connect("localhost", "*user*", "*password*", "d*atabase*");

$property_id = "SELECT `id` FROM `*table1*`";

if ($property_id !== "") {
       
    $query = mysqli_query($conn, "SELECT `*column1*`, `*column2*`, `*column3*`, `*column4*`, `*column5*`, `*column6*`, `*column7*`, `*column8*`, `*column9*`, `*column10*` FROM `*table2*` WHERE property_id='$property_id'");
  
    $row = mysqli_fetch_array($query);
    $*column1* = $row["*column1*"];
    $*column2* = $row["*column2*"];
    $*column3* = $row["*column3*"];
    $*column4* = $row["*column4*"];
    $*column5* = $row["*column5*"];
    $*column6* = $row["*column6*"];
    $*column7* = $row["*column7*"];
    $*column8* = $row["*column8*"];
    $*column9* = $row["*column9*"];
    $*column10* = $row["*column10*"];

}

$result = array("$*column1*", "$*column2*", "$*column3*", "$*column4*", "$*column5*", "$*column6*", "$*column7*", "$*column8*", "$*column9*", "$*column10*");
  
$myJSON = json_encode($result);
echo $myJSON;
?>

At first I was getting a 404, then I created a view for that url "client/for-ajax.blade.php/" and now I get a syntax error on the console:

Uncaught SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
    at JSON.parse (<anonymous>)
    at GetDetail.xmlhttp.onreadystatechange

via Chebli Mohamed