Function Sort() makes attribute data="" Undefined

Question

I’m using the function sort() to sort some Ivs. But I’m having some problems.

I use the attribute data="" to add a JSON. But because it has many bytes and is used on thousands of Ivs, I prefer to use it dynamically with Jquery. For when I inspect the element in the browser, it becomes fast.

The problem occurs when I use the function sort() twice listing Divs. The second time she ends up deleting the date attribute, returning undefined.

Now, if I add the attribute directly into the code, this type of problem does not occur.

How do I add dynamically and not have this problem?

I leave an example similar to my code, just double click the button erro_2_clicks, and then click on the div lista that generates the error:

ex: https://jsfiddle.net/pjga86x7/3/

$(document).ready(function() {

  //AQUI GERA O ERRO
  $(".lista").each(function(a, b) {
    $(b).data("id", a + 1);
  });

  $(document).on("click", ".erro_2_clicks", function() {
    var div = $(".lista");
    div.sort(function(a, b) {
      return $(b).data("id") - $(a).data("id");
    });
    $(".errado").html(div);
  })

  $(document).on("click", ".lista", function() {
    console.log($(this).data("id") + " Erro com 2 clicks")
  })

  //ESCREVER DIRETAMENTE NO CÓDIGO FUNCIONA NORMALMENTE
  $(document).on("click", ".certo_2_clicks", function() {
    var div = $(".lista_certo");
    div.sort(function(a, b) {
      return $(b).data("certo") - $(a).data("certo");
    });
    $(".certo").html(div);
  });

  $(document).on("click", ".lista_certo", function() {
    console.log($(this).data("certo") + " certo")
  })


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="lista">1</div>
<div class="lista">2</div>
<div class="lista">3</div>
<div class="lista">4</div>
<div class="lista">5</div>
<div class="lista">6</div>
<div class="lista">7</div>
<div class="lista">8</div>
<div class="lista">9</div>
<div class="lista">10</div>
<div class="errado"></div>
<button class="erro_2_clicks">Erro 2 click</button>

<div data-certo="1" class="lista_certo">1</div>
<div data-certo="2" class="lista_certo">2</div>
<div data-certo="3" class="lista_certo">3</div>
<div data-certo="4" class="lista_certo">4</div>
<div data-certo="5" class="lista_certo">5</div>
<div data-certo="6" class="lista_certo">6</div>
<div data-certo="7" class="lista_certo">7</div>
<div data-certo="8" class="lista_certo">8</div>
<div data-certo="9" class="lista_certo">9</div>
<div data-certo="10" class="lista_certo">10</div>
<div class="certo"></div>
<button class="certo_2_clicks">Certo 2 clicks</button>

Answer 1

The .data() is a jQuery property assigned to the element. When doing .sort() and then insert the result with .html() for the second time, this property is empty.

Instead of using .html(), use .appendTo() that all properties of the elements will be retained.

Change:

$(".errado").html(div);

For:

div.appendTo(".errado");