Ajax path issues - ajax

Question

I am using XAMP localhost. I have a folder named wesite in my htdocs for my website template I am creating. My ajax call works fine when both js and php is in the root of this folder. However, when I create a folder name functions and put the js and php script there at the root, the js ajax call don't call the php. Below is the code. It works fine when both are in the directory as the index.php or any other html files, but not in a sub directory. I know it has to do with the path because the scripts work otherwise.
The folder structure is like this there is a folder called Website which has all the html files saved with php ext. Inside this Website folder I have the functions folder which has all the js and php functions no sub directory in the functions folder so all js and php files are at the root of the functions folder. When I look at the inspect element in Chrome, it says the update.php file has a 404 file not found error. This is weird giving the fact that both the js and php are in the same folder. The php script is a simple test script which just echo "Hello From php" to see if I am getting a response
function navUpdate(){
alert('Hello from functins');
var navItemOne = document.getElementById('menu-item-one').innerHTML;
var navItemTwo = document.getElementById('menu-item-two').innerHTML;
var navItemThree = document.getElementById('menu-item-three').innerHTML;
var navItemFour = document.getElementById('menu-item-four').innerHTML;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
alert(this.responseText);
}
}
xhttp.open("POST", "update.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(`nav-item-one=${navItemOne}&nav-item-two=${navItemTwo}&nav-item-
three=${navItemThree}&nav-item-four=${navItemFour}`);
}