Error con array global de PHP en JavaScript

[jrob_olbaid]

Buen dia.

Otra vez pidiendo ayuda pero no encuentro solucion a un problema!

Creo un array global en php:

Código PHP:

  $HorasApartados= array ("08:00","09:00","10:00","11:00","12:00","01:00","02:00","03:00","04:00","05:00","06:00"); 
   

Despues creo una funcion donde modifico algunos valores de este arreglo:

Código PHP:

  function HorasLibres($HorasOcupadas){
        
        global $HorasApartados;
        
        for ($i=0; $i<sizeof($HorasApartados);$i++){
            for($j=0; $j<sizeof($HorasOcupadas);$j++){
                if ($HorasOcupadas[$j] == $HorasApartados[$i]){
                     $HorasApartados[$i]= "OCUPADO";
                }
            }
        }
    } 
   

Si la hora esta ocupada segun la BD el valor de arreglo se cambia por "OCUPADO", todo funciona correctamente hasta aqui!

El problema es cuando llego a javascript y quiero mostar la posicion del arreglo, suponiendo que se es ocupado... me muestra la hora del arreglo original y no el ocupado:

Suponiendo que el arreglo esta asi despues de cambiarlo con el metodo anterior:

Código PHP:

  $HorasApartados= array ("OCUPADO","09:00","10:00","11:00","12:00","01:00","02:00","03:00","04:00","05:00","06:00"); 
   

Código PHP:

 <script>
    function validaHoras(){
           var arreglo_horarios = new Array ();
           arreglo_horarios[0]= "<?echo $HorasApartados[0];?>";
       alert("Hora seleccionada "+arreglo_horarios[0])
    }
</script>  

Y en php si imprimo $HorasApartados[0], si me pone "OCUPADO"...

Es posible hacer esto en la misma pagina o tengo que validar en otra?? u.u

Gracias por su atencion