Resize a div multiple times with same function in jQuery

[paulF]

I have a click function that animates the width of a series of divs and adds ones that are hidden. That fiddle is here. What I want is to have that function do what it's doing but also resize the existing divs again in order to fit more in all the way down to having the divs 10px wide giving me the ability to have as many as possible within the wrapper. So I would click the "plus" trigger to add 5 extra divs and they resize to 30px, then I click again to have 5 more added and they resize to 15px..and so on down to 10px. jQuery here:\[code\]$(".plus").click(function(){ $(".box").animate({ width: 20 }, 500 ); $(".box2").fadeIn(500);});$(".minus").click(function(){ $(".box").animate({ width: 60 }, 500 ); $(".box2").fadeOut(500);});\[/code\]