title: loop through classes after successful AJAX call within a sortable
body: <p>I have a <code>sortable</code> call which allows me to change the order of songs I have listed by dragging them which is the working part. What I want to do is try and get a number in front of each title so that the user knows which is the first song and so on by using a label like <code>1.</code></p>
  
  <p>I am putting the code within the <code>success</code> callback from AJAX which basically just updated the <code>query</code> and changes the order in the DB which also works fine.</p>
  
  <p>What I cant get to work is the loop <code>.each</code> within the <code>success</code> callback in AJAX. It does not seem to want to fire or even find the classes <code>.song-orders</code></p>
  
  <p>I have shown what it looks like before and what I want it to look like after.</p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$('.draggablePanelList').sortable({
      update: function(event, ui) {
          var wafilesid = $(this).find('.wafilesid').attr('id');
          var grouptype = [];
          $(this).find('.sortableid').each(function() {
              grouptype.push($(this).attr('id'));
          });
          $.ajax({
              type: "POST",
              url: "../includes/updatesetlists.php?",
              data:({grouptype: grouptype, wafilesid: wafilesid}),
              success: function(data) {
                  count = 1;
                  $(this).find('.song-orders').each(function() {
                      $(this).('.song-orders').prepend(count+'. ');
                      count++;
                  });
              }
          });
      }
  });
  </code></pre>
  
  <p><strong>HTML BEFORE</strong></p>
  
  <pre><code>&lt;ul class="list-unstyled draggablePanelList" style="overflow:auto;"&gt;
      &lt;div class="song-orders"&gt;Title Of Song 1&lt;/div&gt;
      &lt;div class="song-orders"&gt;Title Of Song 2&lt;/div&gt;
      &lt;div class="song-orders"&gt;Title Of Song 3&lt;/div&gt;
      &lt;div class="song-orders"&gt;Title Of Song 4&lt;/div&gt;
      &lt;div class="song-orders"&gt;Title Of Song 5&lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>HTML AFTER</strong></p>
  
  <pre><code>&lt;ul class="list-unstyled draggablePanelList" style="overflow:auto;"&gt;
      &lt;div class="song-orders"&gt;1. Title Of Song 1&lt;/div&gt;
      &lt;div class="song-orders"&gt;2. Title Of Song 2&lt;/div&gt;
      &lt;div class="song-orders"&gt;3. Title Of Song 3&lt;/div&gt;
      &lt;div class="song-orders"&gt;4. Title Of Song 4&lt;/div&gt;
      &lt;div class="song-orders"&gt;5. Title Of Song 5&lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>