Modifier la width d'un element avec .animate()

Bonjour,

Voila je rencontre un petit problème avec mon code. J'ai plusieurs rectangle quand je click sur un rectangle ça augmente la lageur de 20% et tous les autres rectangle récupere lrus dimension d'origine.

$('.task').click(function () {
    //si le rectangle n'est pas agrandie sinon on ne fait rien
    if(!$(this).hasClass('active')){
                //on recupere la taille d'origine
                var width = $(".active").attr("data-size");
                //on modifie la taille avec un animation
                $(".active").animate({
                        width: "-=" + width
                    });
                    //on supprimer les class active
                $('.task').removeClass('active');
              //on recupere la taille de base et on ajoute 20% du rectangle selectionné 
              var size = $(this).width();
              size = size * 1.2;
              //on lui ajoute la classe active pour savoir lequel est agrandi
              $(this).addClass('active');
              //on l'agrandi avec une animation
              $('.active').animate({
                    width: "+=" + size
               });
    }
}); 

Quand je click sur mon rectangle la gestion des class active fonctionne ainsi que l'augmentation de 20% de la largeur.
Mais mes anciens rectangle selectionné grade leurs taille avec ces fameux 20% alors qu'il devrais éffectué l'animation de -20%.
Merci pour votre aide

Afin d'aider à la compréhension de mon probleme voici tout le code (html css jquery) https://jsfiddle.net/stalker069/r43p6274/11/