Два зависимых выпадающих в php

Question

Я знаю, что это заданный вопрос, но никто не помог мне. У меня есть 2 поля product & sub_prod в моих таблицах. Я хочу показать опции в sub_prod select в соответствии с опцией, выбранной в продукте. Я попробовал описанный пример HERE , он включает sub_prod, но не имеет никаких значений. У меня есть запрос с MYSQL, и он дает значения, следовательно, запрос правильный. Я alert(response) показывает мне вариант выбора продукта. Я знаю, что совершил глупую ошибку, но не смог понять.
моя php страница:

                <select name="product" id="product" class="form-control form-control-sm">
                            <option selected="selected">Select Product </option>

                        <?php
                            $sql = mysqli_query($con, "SELECT DISTINCT product From prod_masteer");
                            $row = mysqli_num_rows($sql);
                            while ($row = mysqli_fetch_array($sql)){
                            echo "<option value='". $row['product'] ."'>" .$row['product'] ."</option>" ;
                            }
                            ?>
                </select>
                           <select name="sub_prod" id="sub_prod" class="form-control form-control-sm" disabled>
                            <option selected="selected">Select Sub product </option>
                           </select>
  <script type="text/javascript">
   $('#product').change(function() {
   var prod = $(this).val();
   //These are to disable enable other select
if( $(this).val() == "Vehicle") {
    $('#make').prop( "disabled", false );
    $('#model').prop( "disabled", false );
    $('#year').prop( "disabled", false );
} else {       
    $('#make').prop( "disabled", true );
    $('#model').prop( "disabled", true );
    $('#year').prop( "disabled", true );
    $('#sub_prod').prop( "disabled", false );

     //document.getElementById("c_name").value=prod;
}
 //////////////////////////////////////////

        $.ajax({
            type:'POST',
            url:'ajaxData.php',
            data:'product='+prod,
            success:function(response){//I tried here with html too
               // alert(response);
                $('#sub_prod').html(response);
                //$('#city').html('<option value="">Select state first</option>'); 
            }
        }); 

});
</script>

моя ajaxData. php

<?php
//Include database configuration file
include './db_config.php';

if(isset($_POST["product"]) && !empty($_POST["product"])){
//Get all state data

$query = $db->query("SELECT * FROM prod_masteer WHERE product = ".$_POST['product']." ORDER BY sub_prod ASC");

//Count total number of rows
$rowCount = $query->num_rows;

//Display states list
if($rowCount > 0){
    echo '<option value="">Select sub Product</option>';
    while($row = $query->fetch_assoc()){ 
        echo '<option value="'.$row['sub_prod'].'">'.$row['sub_prod'].'</option>';
    }
}else{
    echo '<option value="">State not available</option>';
}
}
?>

Вот скриншот ответа, который я получаю с консоли разработчика.