jquery Resultados duplicados quando seleciona o select

[Anarquista]

Olá pessoal, tudo bem?

 

Tenho um sistema do qual traz em um combobox a relação de grades (masculino, feminino, etc) do banco de dados e a mesma tabela está como chave estrangeira da tabela de tamanhos. Quando seleciona uma grade, os tamanhos referentes a essa grade aparece conforme anexo. O problema está quando clico em "Incluir nova cor" e seleciono outra grade. Os tamanhos da nova grade aparece também na grade já selecionada anteriormente. Como faço para que não tenha duplicidade. Veja abaixo:

<table width="100%" >
<tr class="linhas">
<td>
<table class="table table-bordered">
<tr>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>
        <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>
    </tr>
<tr>
    <td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>
    <td style="text-align: center; width: 30%">
    <select name="CoresBasicas" class="form-control">
    <?php echo $metodos->comboCores($key); ?>
    </select>        
    </td>
    <td style="text-align: left;">
        <select name="Grades" class="form-control grades" style="width: 100%">
        <?php echo $metodos->comboGrades(); ?>
        </select>    
    </td>
    </tr>
    <tr>
    <td colspan="3">    
    <?php //echo $metodos->listarTamanhos(); ?>
    <div class="mostrarGrades"></div>    
</td>
</tr>
<tr>
<td colspan="3" class="text-left">

<label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>

</td>
</table>

JQuery

$(function () {
  function removeCampo() {
    $(".removerCampo").unbind("click");
    $(".removerCampo").bind("click", function () {
       if($("tr.linhas").length > 1){
        $(this).parent().parent().remove();
       }
    });
  }

  $(".adicionarCampo").click(function () {
    novoCampo = $("tr.linhas:first").clone();
    //novoCampo.find("input").val("");
    novoCampo.find('input[type="text"]').val("");
    novoCampo.find('select').val("");

    //novoCampo.find('input[type="radio"]').prop('selected', false);
    novoCampo.insertAfter("tr.linhas:last");
    removeCampo();
  });
});
$(document).ready( function ()
{
$(document).on('change', '.grades', function(){
    valorEscolhido = $(this).find('option:selected').val();
    $.ajax({
    method: "POST",
        url: "<?php echo $caminhoAbsoluto; ?>/listar.php",
        data: { v: valorEscolhido }
    })
    .done(function( msg ) {
            $('.mostrarGrades').html(msg);        
    });
});
});

Obrigado!