About-Writing data

I'm filling an html table with data that throws me a query with ajax. The call is initialized by a select depending on the selected data:

 <select name="verListaDe"  class="navbar-form navbar-left">
        <option id="all" value="1">Todos</option>
        <option id="prof" value="3">Profesores</option>
</select>

and the code in ajax I have the following:

$(document).ready(function(){
var screen = $('#loading-screen');
configureLoadingScreen(screen);

$('#prof').on('click', function(){
     $.get('../listaEmpleado/profesores/3')
         .done(function(result){
             $.ajax({
        url:'../listaEmpleado/profesores/3',
        type:'get',
        dataType:'json',
        data: {

        },
        success:function(data){

       $.each(data, function(idx, opt) {           

            $('#contenido').append("<tr><td><center><img style='width: 100px; height: 100px'  class='img-thumbnail' src='../img/"+opt.foto+"'></img></center></td>"
                +"<td>" +opt.NombreEmpleado+" "+opt.txtPaterno+" "+opt.txtMaterno+ "</td>"
                +"<td>Profesor</td>"
                +"<td>"+opt.cedulaProfecional+"</td>"
                +"<td>"+opt.especialidad+"</td>"
                +"<td>"+opt.nivelEstudios+"</td>"
                +"<td><a href='../edit/profesor/" +opt.id+ "'<button class='btn btn-info'>Editar</button></a>"
                +" "+"<a href='../delete/profe/" +opt.id+ "'<button class='btn btn-danger'>Eliminar</button></a></td></tr>"); 


            });
        }
    });
         })
         .fail(function(error){
             console.error(error);
         })
})
});

function configureLoadingScreen(screen){
$(document)
    .ajaxStart(function () {
        screen.fadeIn();
    })
    .ajaxStop(function () {
        screen.fadeOut();
    });
}



$(document).ready(function(){
var screen = $('#loading-screen');
configureLoadingScreen(screen);

$('#emp').on('click', function(){
     $.get('../listaEmpleado/general/1')
         .done(function(result){
             $.ajax({
        url:'../listaEmpleado/general/1',
        type:'get',
        dataType:'json',
        data: {

        },
        success:function(data){

       $.each(data, function(idx, opt) {           

            $('#contenido').append("<tr><td><center><img style='width: 100px; height: 100px'  class='img-thumbnail' src='../img/"+opt.foto+"'></img></center></td>"
                +"<td>" +opt.NombreEmpleado+" "+opt.txtPaterno+" "+opt.txtMaterno+ "</td>"
                +"<td>Profesor</td>"
                +"<td>"+opt.cedulaProfecional+"</td>"
                +"<td>"+opt.especialidad+"</td>"
                +"<td>"+opt.nivelEstudios+"</td>"
                +"<td><a href='../edit/profesor/" +opt.id+ "'<button class='btn btn-info'>Editar</button></a>"
                +" "+"<a href='../delete/profe/" +opt.id+ "'<button class='btn btn-danger'>Eliminar</button></a></td></tr>");   
            });
            }
         });
             })
             .fail(function(error){
             console.error(error);
         })
})
});

function configureLoadingScreen(screen){
    $(document)
    .ajaxStart(function () {
        screen.fadeIn();
    })
    .ajaxStop(function () {
        screen.fadeOut();
    });
}

the code works the problem is that when selecting the same data it is placed again (it makes the request again but it puts the information back) and if I select another option it brings the new info but leaves the previous info. How can I fix it?