Datepicker in div not working after ajax call

Question

I have buttons each with their id (idroom).

When I click on the ajax call is executed, and a datepicker is displayed with the disabled days of that ID.

The problem is that the first click works, the datepicker Shows, but then if I press another button, the datepicker is not displayed

The code with buttons and div datepicker

<div class="form-control" style="height: 224px;">
<div type="text" id="datepicker9" name"datepicker9" /></div>
</div>

<?php
include "controlreservas/conexion.php";
$user_id=null;
$sql1= "select h.id_habitacion,h.valor_habitacion,h.obs,
h.id_residencial,r.id_residencial,r.nombre_residencial,
h.id_tipo,t.id_tipo,t.tipo,
h.numero_habitacion,
h.id_tipo,h.tipo_bano,h.estado,h.imagen
from habitaciones as h 
inner join residenciales as r ON h.id_residencial=r.id_residencial 
inner join tipo_habitacion as t ON h.id_tipo=t.id_tipo order by h.id_habitacion";
$query = $con->query($sql1);
if($query->num_rows>0){
while ($r=$query->fetch_array()){
?>
<div style="float:left;border-top-width: 5px;margin-right: 5px;margin-bottom: 5px;margin-left: 5px;margin-top: 5px;" >
<button type='submit' id='buttonValue'  name='buttonValue' onClick='MCNdetails(this)'  value='<?php echo $r["id_habitacion"]?>'  class="<?php if ($r["estado"] == 'Abierta') { echo 'btn btn-sm btn-success'; } elseif ($r["estado"] == 'Cerrada') { echo 'btn btn-sm btn-danger'; }?> label-mini">
N&deg;<?php echo $r["numero_habitacion"]; ?> <?php echo $r["nombre_residencial"]; ?><br><?php echo $r["estado"]; ?>
</button>
</div>
<?php
}}
?>

AJAX:

<script>
function MCNdetails(btn) {
var buttonValue = btn.value;
        $.ajax({
                type:'POST',
                url:'GUImostrarcalendario.php',
                data:'buttonValue='+buttonValue,
                success:function(html){
                $("#datepicker9").html(html);
                }   
 }); 
}
</script>

GUImostrarcalendario.php:

<?php
    include "controlreservas/conexion.php";
    $id_habitacion=$_POST["buttonValue"];
    $sql1="SELECT llegada,salida,id_reserva FROM reservas where id_habitacion ='$id_habitacion'";
    $query = $con->query($sql1);
    $dates_ar = [];
    if($query->num_rows>0) {
        while ($r=$query->fetch_array()) {
            $begin = new DateTime( $r["llegada"] );
            $end = new DateTime( $r["salida"] );
            $end = $end->modify( '+1 day' ); 
            $interval = new DateInterval('P1D');
            $daterange = new DatePeriod($begin, $interval ,$end);
            foreach ($daterange as $date) {
            $dates_ar[] = $date->format("Y-m-d");
            }
        }
        ?>
        <script>
            $(function() {
                var disabledDays = <?php echo json_encode($dates_ar)?>;
                var date = new Date();
                 $( "#datepicker9").datepicker({ 
                    dateFormat: 'Y-m-d',
                    beforeShowDay: function(date) {
                        var m = date.getMonth() + 1, 
                            d = date.getDate(), 
                            y = date.getFullYear(),
                            strdate = [y,m,d].join('-');
                        if (disabledDays.indexOf(strdate) == -1) {
                            return [true, '', ''];
                        }
                        return [false];
                    }
                });
            });
        </script>
        <?php
    }

    else {
?>
        <script>
            $(function() {
                $( "#datepicker9").datepicker({ 
                    dateFormat: 'yy-mm-dd',
           });
            });
        </script>
        <?php

    }
?>

ty for you time

Answer 1

Just include $("#datepicker9").datepicker("destroy"); in your ajax success method , also reinitialize the date picker check this fiddle Sample