title: How do you properly refresh a list using List.js
body: <p>I have a reporting page that I don't want page refreshes on.  On select list change, I call an API to generate the new report and spit it out to the DOM using List.js.  The issue that I'm running into is: only the first report loaded works properly with the sorting functionality.  I believe the core of the issue is how I'm 'refreshing' the list.  Here is the code:</p>
  
  <pre><code>function initializeReport(videoName) {
      if (videoName) {
          $.ajax({
              url: '/api/report/' + videoName,
              type: "GET",
              dataType: "json",
              success: function (data) {
                  var values = [];
                  var countWatched = 0;
                  data.forEach(function (entry) {
                      values.push({ name: entry.UserName, title: entry.Title, count: entry.Count, time_played: entry.TimePlayed })
                      if (entry.TimePlayed &gt; 0) {
                          countWatched++;
                      }
                  });
                  var options = {
                      valueNames: ['name', 'title', 'time_played', 'count'],
                      item: '&lt;li&gt;&lt;div class="name"&gt;&lt;/div&gt;&lt;div class="title"&gt;&lt;/div&gt;&lt;div class="time_played"&gt;&lt;/div&gt;&lt;div class="count"&gt;&lt;/div&gt;&lt;/li&gt;'
                  };
                  var userList = new List('views', options);
                  userList.remove();
                  userList.add(values);
              }
          });
      }
  }
  </code></pre>
  
  <p><strong>EDIT</strong>
  Here is the <a href="https://jsfiddle.net/mzebvL1q/7/" rel="nofollow">jsfiddle</a></p>