Ajax, PHP Automatyczne uzupełnianie pola typu select

Question

Cześć, obecnie próbuję napisać skrypt który dzięki Ajax będzie działał tak że po wybraniu wartości w pierwszy polu typu select, drugie pole uzupełni się automatycznie.

Ma to działać na tej zasadzie Przykład

Jednak po wyborze pierwszego selecta drugi pozostaje pusty dlaczego ?

Kod HTML

    <select name="value_1" id="value_1" >
        <option value="">Wybierz 1</option>
        <option value="1">Wartosc 1</option>
        <option value="2">Wartosc 2</option>
        <option value="3">Wartosc 3</option>
    </select>
        
    <select name="value_2" id="value_2" >
        <option value="">Wybierz 2</option>
    </select>

    <select name="value_3" id="value_3" >
        <option value="">Wybierz 3</option>
    </select>

Oczywiście w pierwszy select dane są wyciągane z bazy jednak dla przykładu dałem teraz sztywne dane.

Kod JavaScript

$(document).ready(function(){
    $('#value_1').on('change',function(){
        var value = $(this).val();
        if(value){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'value_1='+value,
                success:function(html){
                    $('#value_2').html(html);
                    $('#value_3').html('<option value="">Wybierz najpierw wartosc 1</option>'); 
                }
            });

        }else{
            $('#value_2').html('<option value="">Wybierz najpierw wartosc 1</option>');
            $('#value_3').html('<option value="">Wybierz najpierw wartosc 3</option>'); 
        }
    });
    
    $('#value_2').on('change',function(){
        var value = $(this).val();
        if(value){
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'value_2='+value,
                success:function(html){
                    $('#value_3').html(html);
                }
            }); 
        }else{
            $('#value_3').html('<option value="">Wybierz najpierw wartosc 2</option>'); 
        }
    });
});

Kod PHP plik ajaxData.php

<?php
    if(isset($_POST["value_1"]) && !empty($_POST["value_1"])){

        echo '<option value="1">Wartosc 1</option>';
        echo '<option value="2">Wartosc 2</option>';
        echo '<option value="3">Wartosc 3</option>';
    }

    if(isset($_POST["value_2"]) && !empty($_POST["value_2"])){
        
        echo '<option value="1">Wartosc 1</option>';
        echo '<option value="2">Wartosc 2</option>';
        echo '<option value="3">Wartosc 3</option>';
    }
?>

Tutaj także dałem dane przykładowe, normalnie będę je pobierał z bazy danych.

Problem jest taki że w pierwszym select dane się wyświetlają ok, jednak po kliknięciu w jakąś wartość drugi select traci swoją zawartość i nie wyświetla przykładowych z pliku ajaxData.php

Wie ktoś z was gdzie leży błąd ?