Remplir Select avec base de donnée

Bonjour,
J'ai un petit problème. Avant de commencer je précise que je suis encore novice.

Voila, je souhaite remplir mon Select de mon Form à partir de mes données de ma base MySQL. Et lorsque je selectionne une valeur de mon Select alors je recherche en base de donnée sa valeur attribuée et je l'affiche dans un input.

En fait cela fonctionne bien car je réutilise le code que j'ai fait pour mes autres Select (qui fonctionne bien) sauf que ce dernier se vide après que je selectionne une valeur. Avant de cliquer sur le Select les valeurs sont bien récupérés et le Select se remplit et une fois une valeur selectionné, le Select se vide.

"
***Page du formulaire (booking.php). C'est un collpase qui s'ouvre lorsque l'on clique sur un bouton.
onchange="DiscountOffer(this.value)" => c'est la fonction javascript pour chercher en MySQL la valeur recherche et l'afficher dans le Input (qui suit).***
"

                <div class="collapse" id="collapseContent">
                  <div class="card card-body">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="mb-3">
                          <select class="form-select" aria-label="Default select example" name="booking_offer" id="booking_offer" onchange="DiscountOffer(this.value)">
                            <option value="-1">Sélectionner l'offre</option>
                            <?php 
                              $query = "SELECT * FROM tab_offer ORDER BY offer ASC";
                              $alllist = getList($query);
                              foreach($alllist as $output){  
                                echo '<option value="'.$output['id_offer'].'">'.$output['offer'].'</option>';
                              } 
                            ?>
                          </select>
                        </div>
                      </div>

"
***Fonction dans un autre fichier PHP pour récupérer les valeurs SQL à afficher dans mon Select***
//get list of all massage from DB
function getList($query){
    require_once  "login/connection.php";  (=>fichier de connexion simple à ma base de donnée)
    global $db;
    $statement = $db->prepare($query);
    $statement->execute();
    return $statement->fetchAll();
}

***fichier script.js pour en fonction de la valeur Select (booking_offer) je recherche dans MySQL la valeur correspondante et l'affiche dans mon Input "booking_discount"***
function DiscountOffer(id){
    $('#booking_offer').html('');
    $.ajax({
       type: 'post',
       url: 'ajaxdata.php',
       data: {offer_id : id},
       success: function(data){
           document.getElementById('booking_discount').value= data;
       }
   })
};

***fichier ajaxdata.php***
if(isset($_POST['offer_id'])){
    $idoffer = $_POST['offer_id'];
    if($idoffer != "-1"){
        $check = $db->prepare("SELECT discount FROM tab_offer WHERE id_offer = ?");
        $check->execute(array($idoffer));
        $data = $check->fetch();
        $result = $data['discount'];
        echo $result;        
    }    
}

"

Ce que je veux

Comprendre pourquoi sur ce Select une fois une valeur selectionné il se vide. Alors que c'est exactement le même proceder et code que j'utilise pour mes autres Select et cela fonctionne bien.

Ce que j'obtiens

Mon Select se remplit bien la 1ère fois mais ce vide juste après une selection.