how to replace an ajax call with another

I have a slight doubt about how to substitute an element for another within a for , in this case I make a call to a '$ .post' that collects a json and shows it in a kind of letter to say it of some way, the information collects it well, and the data shows them as it should, the problem is that when I have previously made a call and I do another one with other information, instead of replacing it is added and then ... in this case it is good, well after this half introduction I proceed to show you the code that I have and the capture of it and I apologize for if you do not understand me. The jquery code is as follows

$.post('.show_bookmarks.php',{id_sub_categoria:id_sub_categoria},
    function(response){
        response = JSON.parse(response);
        console.log(response);
        for(var i in response){
            // console.log(response[i]);
            $('#add').prepend(

                $('<a/>',{'href':response[i].url}).append(
                    $('<div/>',{'id':'my_card','class':'col s12 m3'}).append(
                        $('<div/>',{'class':'card'}).append(
                            $('<div/>',{'class':'mi-card-image card-image'}).append(
                                $('<img/>',{'src':'ficheros/bookmark/'+response[i].fichero}),
                                $('<a/>',{'class':'btn-floating fav-edit-del waves-effect waves-light yellow darken-2','onclick':'add_favoritos('+response[i].id+')'}).append(
                                    $('<i/>',{'class':'material-icons','html': 'star_border'})
                                ),
                                $('<a/>',{'class':'btn-floating fav-edit-del waves-effect waves-light blue','onclick':'add_favoritos('+response[i].id+')'}).append(
                                    $('<i/>',{'class':'material-icons','html': 'edit'})
                                ),
                                 $('<a/>',{'class':'btn-floating fav-edit-del waves-effect waves-light red','onclick':'add_favoritos('+response[i].id+')'}).append(
                                    $('<i/>',{'class':'material-icons','html': 'clear'})
                                )
                            ),
                            $('<div/>',{'class':'card-content'}).append($('<span/>',{'class':'card-title ','html':response[i].titulo}),$('<p/>').html(
                                response[i].notas+'<br>'+
                                'usuario: '+response[i].usuario+'<br/>'+
                                'password: '+response[i].password
                                )),


                        )
                    )
                )


            );
        }

    });

the captures are the following: what is marked in red where I click and shows the information

then I make the call to Age of empires (they are examples) and it is added to the line and then it shows something very similar (as it should be) but should disappear the previous two and show the one that I clicked, I do not know if I explain myself very well

Greetings to all and I hope you can help me Thanks.