How do I re-append elements after calling remove()?

Question

I have a 2 drop down list and I want the values of the second drop down to change depending on what the user selects for the first one.

$( "#route" ).change(function(){
routeSelect = $(this).val();

$("#clear").remove();

switch(routeSelect){
    case 'Q':
        console.log(routeSelect);
        for(var i=0;i<routeQ.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeQ.stopTitle[i].name + ">"+ routeQ.stopTitle[i].name + "</option>");
        }
        break;
    case 'T':
        //$("#clear").remove();
        console.log(routeSelect);
        for(var i=0;i<routeT.stopTitle.length;i++){
            $("#stopTitle").append("<option id=\"clear \" value="+ routeT.stopTitle[i].name + ">"+ routeT.stopTitle[i].name + "</option>");
        }
        break;
    default:
        console.log(routeSelect);
        break;
}
});

This code works when I select the first drop down for the first time, but after that calling remove() it does not append anymore.

For example, I select Q in the first drop down, my second empty drop down appends correctly, but when I select T, the second drop down does not change.

Answer 1

Turns out the escape character was not working, I needed to add "clear" manually.

$("#stopTitle").append('<option id="' + "clear"+ '" value="'+ routeQ.stopTitle[i].name + '">'+ routeQ.stopTitle[i].name + '</option>');

vs

$("#stopTitle").append("<option id=\"clear \" value="+ routeQ.stopTitle[i].name + ">"+ routeQ.stopTitle[i].name + "</option>");