title: Sum value of elements inside of a div using jquery
body: <p>I'm doing a sorting of a set of users, I have 4 groupings like so (2 shown):</p>
  
  <pre><code>&lt;div id="team1" class="groupWrapper"&gt;
    &lt;div id="p1" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;John&lt;/div&gt;&lt;div class="skill"&gt;15&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p2" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Luke&lt;/div&gt;&lt;div class="skill"&gt;5&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p3" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Mary&lt;/div&gt;&lt;div class="skill"&gt;10&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p4" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Bob&lt;/div&gt;&lt;div class="skill"&gt;25&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="team2" class="groupWrapper"&gt;
    &lt;div id="p5" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Ryn&lt;/div&gt;&lt;div class="skill"&gt;35&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p6" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Kevin&lt;/div&gt;&lt;div class="skill"&gt;15&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p7" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Susie&lt;/div&gt;&lt;div class="skill"&gt;5&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="p8" class="groupItem"&gt;&lt;div class="itemHeader"&gt;&lt;div class="first"&gt;Jill&lt;/div&gt;&lt;div class="skill"&gt;5&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  ...
  </code></pre>
  
  <p>Now what I would like to do is sum up the skill values for each group, on the fly when they are being sorted.</p>
  
  <p>My sorting jQuery script is here:</p>
  
  <pre><code>$(document).ready(
      function () {
          $('div.groupWrapper').Sortable(
              {
                  accept: 'groupItem',
                  helperclass: 'sortHelper',
                  activeclass :   'sortableactive',
                  hoverclass :    'sortablehover',
                  handle: 'div.itemHeader',
                  tolerance: 'pointer',
                  onChange : function(ser)
                  {
                  },
                  onStart : function()
                  {
                      $.iAutoscroller.start(this, document.getElementsByTagName('body'));
                  },
                  onStop : function()
                  {
                      $.iAutoscroller.stop();
  
                  }
              }
          );
      }
  );
  </code></pre>
  
  <p>I would like to be able to 'on drop' of the element, sum up all the totals in every 'team'.  So that whoever sorts the groups always gets the correct skill total per group.</p>
  
  <p>I'm not the greatest user of jQuery yet, but trying to practice more with sortable elements like this.</p>
  
  <p><strong>EDIT</strong><br>
  I modified my html to include a <code>&lt;div class='teamskill'&gt;&lt;/div&gt;</code> under each <code>&lt;div id="team#"&gt;&lt;/div&gt;</code> element (which contains members).</p>
  
  <p>I wanted to have <code>teamskill</code> be updated (the content of it at least).</p>
  
  <p>So I modified the jQuery code to look like so:</p>
  
  <pre><code>$(document).ready(
      function () {
          $('div.groupWrapper').Sortable(
              {
                  accept: 'groupItem',
                  helperclass: 'sortHelper',
                  activeclass :   'sortableactive',
                  hoverclass :    'sortablehover',
                  handle: 'div.itemHeader',
                  tolerance: 'pointer',
                  onChange : function(ser)
                  {
  $("div.groupWrapper").each(function() {
    var total = 0;
    $(this).find("div.skill").each(function() {
      total += parseInt($(this).text());
    });
    $(this).find(".teamskill").html(total);
  });
                  },
                  onStart : function()
                  {
                      $.iAutoscroller.start(this, document.getElementsByTagName('body'));
                  },
                  onStop : function()
                  {
                      $.iAutoscroller.stop();
  
                  }
              }
          );
      }
  );
  </code></pre>
  
  <p>However, I end up with only the first element <code>&lt;div class='teamskill'&gt;&lt;/div&gt;</code> updating, no other ones (for other teams). Thoughts?</p>