Replace select options with ajax?

i have three dropdowns and 1 depends on 2 and 2 depends on 3. This is how it works. I have an issue with the 3rd one, when users changes something on 2 then 3 appends new options along with the old options. How to just replace the old ones with new ones ?

my code:

<script>
    $("#id_name").change(function () {
      var url = $("#create_application_form").attr("data-cities-url"); 
      var nameId = $(this).val();  
      var temp_intakes = null
      $.ajax({                       
        url: url,                    
        data: {
          'name': nameId 
        },
        success: function (data) { 
            temp_intakes = data.data;
            $.each(data.data, function(index, name){
                $('select[id=id_course]').append(
                $('<option></option>').val(name.id).html(name.name)
                );
              });
            }
      });
      $("#id_course").change(function () {
          
          var selected = $(this).val()
          var data = temp_intakes.filter(v => v.id === parseInt(selected ));
          $.each(data, function(index, name){
            $.each(name.intakes, function(index, test){
                $('select[id=id_intakes]').append(
                    $('<option></option>').attr("value",test).text(test) // problem on here
                )
            })
          });
      })
    });
  </script>

And my data for the above look like this

{id: 2, name: 'John', intakes: Array(3)} // the third option using this "intakes" array as options.

Please help.