Use JS variable in php for sql queries

Question

I am coding a reservation system. I make my links appear in javascript and when I press the next button I have a function which allows to add +7 (days) to my variable. The problem is that this is done in javascript and I would like to retrieve the data in php.

date.js ;

let d = 25;
let m = 08;
let a = 2021;
let date = {"jour":d, "mois":m, "annee":a};
const suivant = document.querySelector("#btn-date-suivant");
const precedent = document.querySelector("#btn-date-precedent");
const marcillac = document.querySelector("#pills-marcillac-tab");
const rampinsolle = document.querySelector("#pills-rampinsolle-tab");
const dussac = document.querySelector("#pills-dussac-tab");
const dText = document.querySelector("#d-text");
const lien_marcillac= document.getElementById("lien_marcillac");
const lien_rampinsolle= document.getElementById("lien_rampinsolle");
const lien_dussac= document.getElementById("lien_dussac");


function ajaxPost(url, data, callback) {
    var req = new XMLHttpRequest();
    req.open("GET", url);
    req.onreadystatechange = function () {
        if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
            callback(req.responseText);
        }
    };
        req.setRequestHeader("Content-Type", "application/json")
        req.send(data);
}
const writemarcillac = () => {
    
    dText.innerHTML = d + "/" + m + "/" + a;
    lien_marcillac.innerHTML = '<div id="lien_1" class="lien_horaire "><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:00 marcillac">15:00</a></div><div id="lien_2" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:15 marcillac">15:15</a></div><div id="lien_3" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:30 marcillac">15:30</a></div><div id="lien_4" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:45 marcillac">15:45</a></div><div id="lien_5" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:00 marcillac">16:00</a></div><div id="lien_6" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:15 marcillac">16:15</a></div><div id="lien_7" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:30 marcillac">16:30</a></div>'
}
const writerampinsolle = () => {
    dText.innerHTML = d + "/" + m + "/" + a;
    lien_rampinsolle.innerHTML = '<div id="lien_1" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:00 rampinsolle">15:00</a></div><div id="lien_2" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:15 rampsinsolle">15:15</a></div><div id="lien_3" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:30 rampinsolle">15:30</a></div><div id="lien_4" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:45 rampinsolle">15:45</a></div><div id="lien_5" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:00 rampinsolle">16:00</a></div><div id="lien_6" class="lien_horaire " "><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:15 rampinsolle">16:15</a></div><div id="lien_7" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:30 rampinsolle">16:30</a></div>'
}
const writedussac = () => {
    dText.innerHTML = d + "/" + m + "/" + a;
    lien_dussac.innerHTML = '<div id="lien_1" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:00 dussac">15:00</a></div><div id="lien_2" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:15 dussac">15:15</a></div><div id="lien_3" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:30 dussac">15:30</a></div><div id="lien_4" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 15:45 dussac">15:45</a></div><div id="lien_5" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:00 dussac">16:00</a></div><div id="lien_6" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:15 dussac">16:15</a></div><div id="lien_7" class="lien_horaire " ><a href="forms.php?id=' + d + '-' + m + "-" + a + ' 16:30 dussac">16:30</a></div>'
}
const write = () => {
    if (marcillac.classList.contains("active")){
        writemarcillac();
    }
    
    if(rampinsolle.classList.contains("active")){
        writerampinsolle();
    }
    
    if (dussac.classList.contains("active")){
        writedussac();
    }
}
const datesuivant = () => {
    d += 7;
    if ( m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12){
        if ( d > 31){
            m += 1;
            d -= 31; 
        }
        if ( m > 12){
            a += 1;
            m = 1;
        }
    }else if(m == 4 || m == 6 || m == 9 || m == 11){
        if ( d > 30){
            m += 1;
            d -= 30; 
        }
        if ( m > 12){
            a += 1;
            m = 1;
        }
    }else if(m == 2){
        if ( d > 28){
            m += 1;
            d -= 28; 
        }
        if ( m > 12){
            a += 1;
            m = 1;
        }
    }
    write();
}
const dateprecedent = () => {
    d -= 7;
    if ( m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12){
        if ( d < 1){
            m -= 1;
            d += 31;
        }
        if ( m < 1){
            a -= 1;
            m = 12;
        }
    }else if(m == 4 || m == 6 || m == 9 || m == 11){
        if ( d < 1){
            m -= 1;
            d += 30;
        }
        if ( m < 1){
            a -= 1;
            m = 12;
        }
    }else if(m == 2){
        if ( d < 1){
            m -= 1;
            d += 28;
        }
        if ( m < 1){
            a -= 1;
            m = 12;
        }
    }
    write();
}

write();

ajaxPost("http://localhost/planning%20amiante%20brut/ajax.php", date,     function (data) {
    console.log(data)
})
suivant.addEventListener("click", datesuivant);
precedent.addEventListener("click", dateprecedent);

and in my index.php i got this :

 <!DOCTYPE html>
<html>
    <head> 
        <meta charset="UTF-8">
            <title>SMD3</title>
        
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,  minimum-scale=1.0, shrink-to-fit=no, user-scalable=no">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">        
        <!-- Modele de site v2 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

        <!-- <script src="ajax.js"></script> -->
        <script src="date.js" async></script>                
                        
    </head>
    <body>
        <div class="row hide-entete-rdv" style="">
            <input type="hidden" id="dtRecherche">
            <div class="col-xs-12">
                <div class="lib_choix_horaire">
                    <h1 style="text-align: center; ">Veuillez choisir un horaire</h1>
                </div>
            </div>
        </div>
        <div class="row hide-entete-rdv" style="text-align: center;">
            <div class="col-xs-12">
                <button href="" class="btn btn-default" id="btn-date-precedent" style="">
                    <span class="fa fa-angle-double-left"></span>
                    <span class="xs-hidden">Précédent</span>
                </button>&nbsp;
         
                <button href="" class="btn btn-default" id="btn-date-suivant" >
                    <span class="fa fa-angle-double-right"></span> 
                    <span class="xs-hidden">Suivant</span>
                </button>
            </div>
        </div>
        <div id="zone_horaire_content" class="row" style="">
            <div class="planning" style="margin-left: 21%;">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                      <button href="" class="nav-link active" id="pills-marcillac-tab" data-bs-toggle="pill" data-bs-target="#pills-marcillac" type="button" role="tab" aria-controls="pills-marcillac" aria-selected="true">Marcillac</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button href="" class="nav-link " id="pills-rampinsolle-tab" onclick="writerampinsolle()" data-bs-toggle="pill" data-bs-target="#pills-rampinsolle" type="button" role="tab" aria-controls="pills-rampinsolle" aria-selected="false">Rampinsolle</button>
                      </li>
                    <li class="nav-item" role="presentation">
                      <button href="" class="nav-link " id="pills-dussac-tab" onclick="writedussac()" data-bs-toggle="pill" data-bs-target="#pills-dussac" type="button" role="tab" aria-controls="pills-dussac" aria-selected="false">Dussac</button>
                    </li>
                      
                </ul>
            </div>
            <div class="tab-content" id="pills-tabContent"style="text-align: center;">
                <big>Mercredi</big>
                <br>
                <div id="d-text"></div>
                <div class="tab-pane fade show active" id="pills-marcillac" role="tabpanel" aria-labelledby="pills-marcillac-tab">
                    <table class="tbl-horaire">
                        <tbody>
                            <tr class="horaire horaire-am">
                                <td id="lien_marcillac" class=" csalt  col-xs-4 col-sm-2 col-md-1  hjour0" valign="top">
                                    
                                </td>
                                
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="pills-rampinsolle" role="tabpanel" aria-labelledby="pills-rampinsolle-tab">
                    <table class="tbl-horaire">
                        <tbody>
                            <tr class="horaire horaire-am">
                                <td id="lien_rampinsolle" class=" csalt  col-xs-4 col-sm-2 col-md-1  hjour0" valign="top">
                             
                            </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="pills-dussac" role="tabpanel" aria-labelledby="pills-dussac-tab">
                    <table class="tbl-horaire">
                        <tbody>
                            <tr class="horaire horaire-am">
                                <td id="lien_dussac" class=" csalt  col-xs-4 col-sm-2 col-md-1  hjour0" valign="top">
                                    
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>

ajax.php:

<?php
    $data = json_decode(file_get_contents('php://input'), true);
    echo $data;
    var_dump($data);
?>

I can't exploit the data sent to the server. Could you help me please, i'm lost :')

I hope that is understandable. Sorry for my english i'm french !

Thank you