title: AJAX list update, get new elements and count
body: <p>I have this HTML list</p>
  <pre><code>&lt;ul id='usernameList'&gt;
      &lt;li class='username'&gt;John&lt;/li&gt;
      &lt;li class='username'&gt;Mark&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  <p>and a form to add new names via AJAX, multiple add separated by commas. The response is a list with the names</p>
  <pre><code>[{name:David, newUser:yes}, {name:Sara, newUser:yes}, {name:Mark, newUser:no}]
  </code></pre>
  <p>I'm trying to insert this names sorted alphabetically in the list, like this example <a href="https://jsfiddle.net/VQu3S/7/" rel="nofollow noreferrer">https://jsfiddle.net/VQu3S/7/</a></p>
  <p>This is my AJAX submit</p>
  <pre><code>var form = $('#formUsername');
  form.submit(function () {
  $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize(),
      dataType: &quot;json&quot;,
      beforeSend: function () {
          //
      },
      success: function (data) {
  
          var listUsernames = $('#usernameList');
          var numUsernames = listUsernames.children().length;
  
          $.each(data, function(i, user) {
              if(user.newUser == &quot;yes&quot;){
  
                  var htmlUser = &quot;&lt;li class='username'&gt;&quot; + user.name + &quot;&lt;/li&gt;&quot;;
                  var added = false;
  
                  $(&quot;.username&quot;, listUsernames).each(function(){
                      if ($(this).text() &gt; user.name) {
                          $(htmlUser).insertBefore($(this));
                          added = true;
                      }
  
                  });
  
                  if(!added)
                      $(htmlUser).appendTo($(listUsernames));
  
              }
  
              // HERE I DO alert('numUsernames')
              // I get the same number of users before sending form
  
              // How can I update here the value of listUsernames and numUsernames?
          });
  
  
  
      }
  });
  return false;
  });
  </code></pre>
  <p>My question is, how I can update the value of <code>listUsernames</code> and <code>numUsernames</code> after adding an item?</p>