Элементы в списке List.js исчезают при сортировке

Question

Я использую List.js для создания сортируемого и доступного для поиска списка, а также импортирую данные из файла CSV в этот список. Я могу сделать обе эти вещи самостоятельно, но когда я пытаюсь их объединить, список (импортированный из CSV) исчезает, когда я пытаюсь его отсортировать.

Я новичок во всем, кроме HTML, поэтому я был бы очень признателен, если бы вы объяснили, как мне 5 лет.

Импорт CSV продолжается во внешнем файле javascript.js.

<script type="text/javascript" src="javascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="users">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">Sort by name</button>
  <button class="sort" data-sort="min-order">Sort by minimum order</button>
  <button class="sort" data-sort="fee">Sort by delivery fee</button>
  <button class="sort" data-sort="time">Sort by delivery time</button>
  <button class="sort" data-sort="carrier">Sort by carrier</button>
  <button class="sort" data-sort="url">Sort by URL</button>
  <ul class="list"></ul>
</div>

window.onload = function() {
  $.ajax({
    url: "mydata.csv",
    dataType: "text",
    success: function(data) {
      var csv_file = data.split(/\r?\n|\r/);
      var table_data = '';
      for (var count = 0; count < csv_file.length; count++) {
        var cell_data = csv_file[count].split(";");
        table_data += '<li>';
        for (var cell_count = 0; cell_count < cell_data.length; cell_count++) {
          if (cell_count === 0) {
            table_data += '<h3 class="name">' + cell_data[cell_count] + '</h3>';
          } else if (cell_count === 1) {
            table_data += '<p class="min-order">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 2) {
            table_data += '<p class="fee">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 3) {
            table_data += '<p class="time">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 4) {
            table_data += '<p class="carrier">' + cell_data[cell_count] + '</p>';
          } else if (cell_count === 5) {
            table_data += '<p class="url">' + cell_data[cell_count] + '</p>';
          } else {
            table_data += '<p>' + cell_data[cell_count] + '</p>';
          }
        }
        table_data += '</li>';
      }
      table_data += '';
      $('.list').html(table_data);
    }
  });
var options = {
  valueNames: ['name', 'min-order', 'fee', 'time', 'carrier', 'url']
};
var userList = new List('users', options);
};

Заранее спасибо !!!