Значение суммы элементов в отделении, использующем jQuery

Я делаю сортировку ряда пользователей, у меня есть 4 группировки как так (2 показанных):

<div id="team1" class="groupWrapper">
  <div id="p1" class="groupItem"><div class="itemHeader"><div class="first">John</div><div class="skill">15</div></div></div>
  <div id="p2" class="groupItem"><div class="itemHeader"><div class="first">Luke</div><div class="skill">5</div></div></div>
  <div id="p3" class="groupItem"><div class="itemHeader"><div class="first">Mary</div><div class="skill">10</div></div></div>
  <div id="p4" class="groupItem"><div class="itemHeader"><div class="first">Bob</div><div class="skill">25</div></div></div>
</div>

<div id="team2" class="groupWrapper">
  <div id="p5" class="groupItem"><div class="itemHeader"><div class="first">Ryn</div><div class="skill">35</div></div></div>
  <div id="p6" class="groupItem"><div class="itemHeader"><div class="first">Kevin</div><div class="skill">15</div></div></div>
  <div id="p7" class="groupItem"><div class="itemHeader"><div class="first">Susie</div><div class="skill">5</div></div></div>
  <div id="p8" class="groupItem"><div class="itemHeader"><div class="first">Jill</div><div class="skill">5</div></div></div>
</div>
...

Теперь то, что я хотел бы сделать, подводят итог значений навыка для каждой группы, на лету когда они сортируются.

Моя сортировка сценарий jQuery здесь:

$(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();

                }
            }
        );
    }
);

Я хотел бы смочь к 'на отбрасывании' элемента, подвести итог всех общих количеств в каждой 'команде'. Так, чтобы, кто бы ни сортирует группы всегда, получил корректное общее количество навыка на группу.

Я еще не самый великий пользователь jQuery, но пытающийся практиковать больше с поддающимися сортировке элементами как это.

Править
Я изменил свой HTML для включения a <div class='teamskill'></div> под каждым <div id="team#"></div> элемент (который содержит участников).

Я хотел иметь teamskill будьте обновлены (содержание его, по крайней мере).

Таким образом, я изменил код jQuery для сходства с так:

$(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();

                }
            }
        );
    }
);

Однако я заканчиваю только с первым элементом <div class='teamskill'></div> обновление, никакие другие (для других команд). Мысли?