React ne génère qu'une seule fois mon script

Bonjour je poste ici car je suis en train de réaliser un petit site ou on pourra réaliser des réservation .
Sur mise a jour de la date et heure un petit tablezau visuel viendra completer le site pour plus de confort.
Malheureusement quand je lance mon script une premiere fois ca fonctionne le tableau s'affiche mais quand je change la date mon ajax est bien envoyé et je recoit bien la réponse mais rien ne s'affiche pouvez vous m'expliquer mon errueru svp ?
Voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
   $("#dte").change(function (e) { 
 
        e.preventDefault();
 
        var rdte = $('#dte').val();
        var rhre = $('#hre').val();
 
 
 
        let data = {
            dte: rdte,
            hre: rhre
        }
 
        if(rhre != null && rdte != null){
            $("#reservation").children().remove();
 
            // Ajax table de 2
            $.ajax({
                type: "POST",
                url: "aj/a_reservation.php",
                data: data,
                dataType: "JSON"
            })
            .done(function(resp){
 
                console.table(resp);
                // console.log(resp.map(id=>{return id.book}))
 
                const map = resp.map(table =>{
 
                    return (
                        <div className="alert alert-success" key={table.id}>
                            <p>{table.book}</p>
                            <p>{table.table}</p>
                        </div>
                    )
                });
 
                const elRoot = (
                    <React.Fragment>
                        <div className="col-12 col-md-3">
                            <h3>Table de 2</h3>
                            <div>{map}</div>
                        </div>
                    </React.Fragment>
                );
 
                ReactDOM.render(elRoot,document.getElementById('reservation'));
            })
            .fail(function(e){
                console.error(e.responseText);
            });
 
 
        };
    });