javascript - jQueryで同じ関数を使用してdivのサイズを複数回変更する

Question

一連の div の幅をアニメーション化し、非表示の div を追加するクリック機能があります。そのフィドルはここにあります。

私が望むのは、その関数にその機能を実行させるだけでなく、既存の div のサイズを再度変更して、div の幅を 10 ピクセルにすることで、ラッパー内にできるだけ多くの機能を持たせることです。

したがって、「プラス」トリガーをクリックして 5 つの余分な div を追加すると、それらのサイズが 30px に変更されます。次に、もう一度クリックしてさらに 5 つ追加すると、サイズが 15px に変更され、10px まで続きます。

ここにjQuery：

$(".plus").click(function(){
  $(".box").animate({ width: 20 }, 500 );
  $(".box2").fadeIn(500);
});

$(".minus").click(function(){
  $(".box").animate({ width: 60 }, 500 );
  $(".box2").fadeOut(500);
});