Using two variables in AJAX to refresh an input with values from the database

I have 3 inputs ( generation, fuel and engine) with predefined values.

<div class="row">
                                    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
                                        <label>Generatie <span>*</span></label>
                                        <div class='s-relative'>
                                            <select class="m-select" name="car-generation" id="car-generation">
                                            <option value='0' name='generation_name' id='generation_name'>Alege mai intai un model</option>
                                            </select>
                                            <span class="fa fa-caret-down"></span>
                                        </div>
                                    </div>
                                    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
                                        <label>Combustibil <span>*</span></label>
                                        <div class='s-relative'>
                                            <select class="m-select" name="car-fuel" id="car-fuel">
                                            <option value='0' name='fuel_name' id='fuel_name'>Alege mai intai o generatie</option>
                                            </select>
                                            <span class="fa fa-caret-down"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 b-submit__main-element wow zoomInUp" data-wow-delay="0.5s">
                                        <label>Engine <span>*</span></label>
                                        <div class='s-relative'>
                                            <select class="m-select" name="car-engine" id="car-engine">
                                                <option value='0' name='engine_name' id='engine_name'>Alege mai intai un combustibil</option>
                                            </select>
                                            <span class="fa fa-caret-down"></span>
                                        </div>
                                    </div>

So far, when I select something from the generation input, the fuel input shows the needed values. But when I select a fuel from the fuels input, the engines input doesn’t show anything.

This is the JS Code:

$(document).ready(function(){
$('#car-generation').on('change',function(){
        var generation_id = $(this).val();
        if(generation_id > 0){
            $.ajax({
                type:'POST',
                url:'ajax.php',
                data:'generation_id='+generation_id,
                success:function(html){
                    $('#car-fuel').html(html);
                }
            }); 
        }else{
            $('#car-fuel').html('<option value="0">Alege mai intai o generatie</option>'); 
        }
    });
    $('#car-fuel').on('change',function(){
        var fuel_id = $(this).val();
        if(fuel_id > 0){
            $.ajax({
                type:'POST',
                url:'ajax.php',
                data: {fuel_id:'fuel_id', generation_id:'generation_id'},
                success:function(html){
                    $('#car-engine').html(html);
                }
            }); 
        }else{
            $('#car-engine').html('<option value="0">Alege un motor</option>');
        }
    });
    $('#car-engine').on('change',function(){
        var engine_id = $(this).val();
        if(engine_id > 0){
            $.ajax({
                type:'POST',
                url:'ajax.php',
                data:'engine_id='+engine_id,
                success:function(html){
                    $('#car-transmission').html(html);
                }
            }); 
        }else{
            $('#car-transmission').html('<option value="0">Alege o transmisie</option>'); 
        }
    });
});

…and this is the PHP:

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

{

  $generation_id = $_POST["generation_id"];

  $query = $mysqli->query("SELECT fuel_id, fuel_name FROM fuels WHERE generation_id =" . $_POST['generation_id']);

  $rowCount = $query->num_rows;

    if($rowCount > 0)
    {
      echo '<option value="0">Alege un combustibil</option>';
        while($row = $query->fetch_assoc())
        { 
          echo '<option value="'.$row['fuel_id'].'">'.$row['fuel_name'].'</option>';
        }
    }else
    {
      echo '<option value="0">Alege un combustibil</option>';
    }

  }
if(isset($_POST["fuel_id"]) && !empty($_POST["fuel_id"]))
{

  $fuel_id = $_POST["fuel_id"];

  $query = $mysqli->query("SELECT engines.engine_id, engines.engine_name FROM engines INNER JOIN generations ON engines.generation_id = generations.generation_id INNER JOIN fuels ON engines.fuel_id = fuels.fuel_id WHERE engines.generation_id = '$generation_id' AND engines.fuel_id = '$fuel_id'");

  $rowCount = $query->num_rows;

    if($rowCount > 0)
    {
      echo '<option value="0">Alege un motor</option>';
        while($row = $query->fetch_assoc())
        { 
          echo '<option value="'.$row['engine_id'].'">'.$row['engine_name'].'</option>';
        }
    }else
    {
      echo '<option value="0">Alege un motor</option>';
    }
}
?>

What am I doing wrong? I don’t have experience with Javascript, AJAX and jquery.

I tried searching for a resolve online, but didn’t find anything