AULA 06 Criando e Manipulando elementos com jQuery 01 Salvando a pontuação no placar | jQuery: domine a biblioteca mais popular do mercado parte 1

Olá Bom dia! Estou tentando adicionar uma linha numa tabela assim como mostra no exercício, mas ao adiciona-lo, automagicamente aparece uma td a mais dentro dos campos mesmo concatenando certo toda a linha. Era pra ser assim

 <tr>
    <td>Edu</td>
    <td>2</td>
 </tr>

mas esta adicionando assim

 <tr>
    <td>Edu</td>
    <td></td>
    <td>2</td>
    <td></td>
</tr>

Ja tentei debugar várias vezes e ver oque ocorre mas não consegui entender o porquê disso, se alguém puder dar uma força ficaria muito agradecido! :D segue abaixo : JS


var campo = $(".campo-digitacao");
var tempoInicial = $("#tempo-digitacao").text();


//nova function
$(function(){
    atualizaTamanhoFrase();
    inicializaContadores();
    inicializaCronometro();
    inicializaBordaVerificadora();
    $("#botao-reiniciar").click(reiniciaJogo);
});

function atualizaTamanhoFrase() {
    var frase = $(".frase").text();
    var numPalavras  = frase.split(" ").length;
    var tamanhoFrase = $("#tamanho-frase");
    tamanhoFrase.text(numPalavras);
}

function inicializaContadores() {
    campo.on("input", function() {
        var conteudo = campo.val();

        var qtdPalavras = conteudo.split(/\S+/).length - 1;
        $("#contador-palavras").text(qtdPalavras);

        var qtdCaracteres = conteudo.length;
        $("#contador-caracteres").text(qtdCaracteres);

    });
}

function inicializaCronometro() {
    var tempoRestante = $("#tempo-digitacao").text();
    campo.one("focus", function() {
        var cronometroID = setInterval(function() {
            tempoRestante--;
            $("#tempo-digitacao").text(tempoRestante);
            if (tempoRestante < 1) {
                // campo.addClass("campo-desativado", true);
                inserePlacar();
                finalizaJogo();
                clearInterval(cronometroID);
            }
        }, 1000);
    });
}

function finalizaJogo(){
  campo.toggleClass("campo-desativado");
  campo.attr("disabled", true);

}

function inicializaBordaVerificadora(){
  var frase = $(".frase").text();
    campo.on("input",function(){
    var digitado = campo.val();//frase inteira após digitado
    var pedacoDaFrase = frase.substr(0,digitado.length);//pedaço da frase enqianto se esta digitando - inicio =0 até digitado.length
      if(digitado == pedacoDaFrase){
        console.log("acertou");
        campo.addClass("campo-certo");
        campo.removeClass("campo-errado");
      }else {
        console.log("errou");
        campo.addClass("campo-errado");
        campo.toggleClass("campo-certo");
      }
    // para esse if poderíamos:
    // var ehCorreto = (digitado == comparavel);
    // campo.toggleClass("borda-verde", ehCorreto);
    // campo.toggleClass("borda-vermelha", !ehCorreto);
    //existe tambem o:
    //var digitouCorreto = frase.startsWith(digitado);
    //if(digitouCorreto) {
    //campo.addClass("borda-verde");
    //} else {
    //campo.addClass("borda-vermelha");
    //}
  });

}

function reiniciaJogo(){
    campo.attr("disabled",false);
    campo.val("");
    $("#contador-palavras").text("0");
    $("#contador-caracteres").text("0");
    $("#tempo-digitacao").text(tempoInicial);
    inicializaCronometro(); //novo
    //campo.removeClass("campo-desativado");
    campo.toggleClass("campo-desativado");//pegando classe do css aqui sem ponto
    campo.removeClass("campo-errado");
    campo.removeClass("campo-certo");

}

function inserePlacar(){
  var corpoTabela = $(".placar").find("tbody");//.find desce a árvore de nós apartir do .placar procurando o tbody
  var usuario = "Edu";
  var numPalavras = $("#contador-palavras").text();
  var linha = "<tr>"+
                "<td>"+usuario+"<td>"+
                "<td>"+numPalavras+"<td>"+
              "</tr>";
  corpoTabela.append(linha);
}

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Duds Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>
<body>
  <div class="container">
    <h1 class="center">Duds Typer</h1>
    <p class="frase center" >Do ,or do not, there is, no try</p>

    <ul class="informacoes center" >
      <li>
        <i class="small material-icons icones">description</i>
        <span id="tamanho-frase">8</span> palavras
      </li>
      <li>
        <i class="small material-icons icones">query_builder</i>
        <span id="tempo-digitacao">3</span> segundos
      </li>
    </ul>

<textarea class="campo-digitacao center" rows="8" cols="40"></textarea>

<div class="botoes"
<a id="botao-reiniciar" class="btn-floating btn-large waves-effect waves-light red">
    <i class="material-icons">restore</i>
</a>
</div>

  <ul class="center">
    <li><span id="contador-caracteres">0</span> caracteres</li>
    <li><span id="contador-palavras">0</span> palavras</li>
  </ul>

<section class="placar">
  <h3 class="center">Placar</h3>
    <table class="centered bordered">
      <thead>
        <tr>
          <th>Nome</th>
          <th>N de palavras</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
      </tbody>
    </table>
</section>

    <script src="js/jquery.js"></script>
    <script src="js/main.js"></script>

</body>
</html>