animation - Jquery toggle poll, animate based on answers -

so working on building sort of animated poll. click each answer on each question, corresponding circle animates right.

the tricky part me is, after first question....lets clicks 'answer1' first question, clicks 'answer1' on 2nd question, clicks 'answer2' on second question..instead of inital circle animating it's original size,(as have defined) need animate down percentage both circles equal since 1 selected in previous question. sort of toggling.

make sense?

this part of bit tricky me delving js/jquery. help, or suggestions appreciated!

here js have written question1.

as can see, have circles animating 80px question1...but know rest of questions, needs configured percentages somehow(which stuck)

/*myclick function - quiz1*/ function myclick() { /*answer1*/ $('ul li:nth-child(2)').on("click", function() {     if ($(this).hasclass('active') === false) {         $(this).addclass('active');         $(this).siblings().addclass('deactive');         $(this).siblings().removeclass('active');         $(this).removeclass('deactive');         if ($(this).hasclass('active')) {             $('.circle1').animate({                 width: "+=3.0%",                 height: "+=3.0%"             });             percentage.html(1);         }         if ($('ul li:nth-child(3)').hasclass('deactive')) {             $('.circle2').animate({                 width: "80px",                 height: "80px"             });             percentage2.html(0);         }           if ($('ul li:nth-child(4)').hasclass('deactive')) {             $('.circle3').animate({                 width: "80px",                 height: "80px"             });            percentage3.html(0);         }     }  }); /*answer2*/  $('ul li:nth-child(3)').on("click", function() {     if ($(this).hasclass('active') === false) {         $(this).addclass('active');         $(this).siblings().addclass('deactive');         $(this).siblings().removeclass('active');         $(this).removeclass('deactive');         if ($(this).hasclass('active')) {             $('.circle2').animate({                 width: "+=3.0%",                 height: "+=3.0%"             });           percentage2.html(1);             }         if ($('ul li:nth-child(2)').hasclass('deactive')) {             $('.circle1').animate({                 width: "80px",                 height: "80px"             });             percentage.html(0);           }           if ($('ul li:nth-child(4)').hasclass('deactive')) {             $('.circle3').animate({                 width: "80px",                 height: "80px"             });            percentage3.html(0);          }       }     }); /*answer3*/     $('ul li:nth-child(4)').on("click", function() {     if ($(this).hasclass('active') === false) {         $(this).addclass('active');         $(this).siblings().addclass('deactive');         $(this).siblings().removeclass('active');         $(this).removeclass('deactive');         if ($(this).hasclass('active')) {             $('.circle3').animate({                 width: "+=3.0%",                 height: "+=3.0%"             });              percentage3.html(1);          }         if ($('ul li:nth-child(2)').hasclass('deactive')) {             $('.circle1').animate({                 width: "80px",                 height: "80px"             });             percentage.html(0);           }           if ($('ul li:nth-child(3)').hasclass('deactive')) {             $('.circle2').animate({                 width: "80px",                 height: "80px"             });             percentage2.html(0);               }         }     });   } 

i know bit intensive, type of help, hints or whatever great. thanks!

here fiddle