Reload Data with .sort from Dynamic Table with Jquery | JSON | Sort with New Data

I have been trying for a few days that when I use the .sort property the data is eliminated or modified instead of it being reloaded as new lines.

Attach Captures from the code Working Image1 How work the code when i press the button, this sort to the highest price to lowest but how do you can see in the second image, the code appears up and this not delete the old data

Marked with "X" the data that does not have to show

this fragment is the one that generates the tables dynamically

const mostrarProductos = () => {
  $.getJSON(URLJSON, (respuesta) => {
    for (let z of respuesta) {
      productosv2.push(z);
    }
    for (let x of productosv2) {
      $("#fila").append(`
              <tr class="deleteProductos">
              <div class="card text-center" style="width: 18rem;" id='btnBorrarCarrito'>

                  <div class="card-body">
                      <input type="hidden" id="idProd" value="${x.id}"> </td>
                      <td class="card-title" id="${x.id}">${x.producto}</h2> </td>
                      <td class="card-text">$ ${x.precio}</p></td>
                      <div class="btn-group" role="group" aria-label="Basic mixed styles example">            
                          <td><button type="button" class="btn btn-success" onclick="agregarCarrito(${x.id})">Agregar</button></td>
                      </div>
                  </div>
              </div>
              </tr>
          `);
    }
    $("#fila").fadeIn("5000");
    
  });
};

And this function is what orders them

function respuestaClickExpensive() {
  $("#fila").html('');

  let productosordenados = productosv2.sort((a, b) => {
    if (a.precio > b.precio) {
      return -1;
    }
    if (a.precio < b.precio) {
      return 1;
    }
    return 0;
  });

  return productosordenados;


}

The one that orders them from smallest to largest is the same only that different signs and names.

As you can see I tried to use a ".html ("")" since previously in another cart attempt it used .innerHtml (Which does not work in this case either, Also the code of the cart is totally different from that moment that it worked for me )

I tried the following:

• $ ("#fila"). empty ();

• Make another function to clean with .empty

• Use Native JavaScript to generate the code.

• $ ("#fila"). remove (); this removes all the content for me but does not regenerate it.

• Change the HTML tag "Row" to a previous div which, since the div was not generated again, did not generate it again.

• $ ("#fila tr"). remove ();

And some more things that I don't remember right now.

If you can guide me on what I did wrong or any suggestions to fix it, I appreciate it.

If I had to follow a template about posting on StackOverFlow or having chosen or named in a different way, I appreciate your comment since it is my first post

Project notes of possible relevance: The complete code outside of html and css is made with Native JavaScript, Jquery, Ajax, SASS and BootStrap.