Fill table with DB data

I'm having a problem adding the designation of an article through the code. I have the following:

HTML

<table class="table table-striped table-bordered" id="vendaTabela" width="100%" >
  <thead>
    <tr>
      <th data-class="expand">Cód.</th>
      <th data-hide="phone">Designação</th>
      <th data-hide="phone">Qnt.</th>
      <th data-hide="phone,tablet">Uni.</th>
      <th>Preço</th>
      <th>Desconto</th>
      <th>IVA</th>
      <th>Sub-Total</th>
    </tr>
  </thead>
    <tbody>
     <tr id="tr0">
         <td class="codigo" contenteditable="true" onblur="codArtigo ( )"></td>
         <td class="designacao"  contenteditable="true"></td>
         <td class="quantidade"  contenteditable="true"></td>
         <td class="unidade"  contenteditable="true"></td>
         <td class="preco"  contenteditable="true" onblur="subtotal()"></td>
         <td class="desconto"  contenteditable="true"></td>
         <td class="iva"  contenteditable="true"></td>
         <td class="total"  contenteditable="true"></td>
     </tr>
    </tbody>
</table>

JQUERY

codArtigo = function () {
   var $linhas = $("#vendaTabela tbody > tr");
   $linhas.each(function () {
     var designacao = $(".designacao", this).html();
     console.log($(".designacao", this).html());

     myJSRoutes.controllers.ArtigoController.getArtigobyId($(".codigo", this).html()).ajax({
                success: function (data) {
                    if (data.length > 0) {
                        $.each(data, function (key, value) {
                            $(".designacao", designacao).html(value.designacaoComercial);
                            console.log(value.designacaoComercial);
                            $(".unidade", $(".unidade", this).html()).html(value.unidade.descricao);
                            console.log(value.unidade.descricao);
                        });
                    }
                }
            })
        })
    }

What is happening to me is this. If the code '1' is added, the table fills in the designation with 'example'. Then add another line and add another article (code: 2, designation: example2), the designation of the two lines is named example2.

I do not think I'm able to recognize this in this part:

var designacao = $(".designacao", this).html();

PS: When doing the console.log ($ (".code", this) .html ()), if you have entered two articles the output is:

When you enter the first one: 1

When entering the second: 1 2

Any suggestions?

EDIT:

I have another identical problem and I decided to edit this question.

//REMOVER LINHAS DA TABELA
    $(document).on('click', '#btnDeleteRow', function(){
        var $linhas = $("#vendaTabela tbody > tr");
        $linhas.each(function () {
           var total = $(".total", this);
            $(".totalBruto").html(ttb-(parseFloat(total.html())));
            console.log(total.html());
        })

I'm trying to update the result of an account that is the totalBruto-totalLine. what happens to me is that if I have two or more rows, this this: var total = $(".total", this); does not seem to be working. What am I failing? The console.log(total.html()); prints all totals and not the total of the line that is loaded: s

PROBLEM SOLVED:

Instead of going through the rows, as I'm using an onclick on the button I went through the button line: var total = $(this).closest('tr').find(".total").text();