How Do I Retain The Index Value So That On Mouse Out I Can Reassign 'Rating-Chosen'(Green Color) To The Circles.Below Is The Code..Plz Help..

<h1>Contoso Web Developer Conference</h1>
 <h2>Finding elements using jQuery</h2>
 <div>This session is about identifying elements using jQuery methods and selectors.</div>
 <h3>Rate this session</h3>
 <div id="rating-container">
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
  <div class="rating-circle"></div>
 </div>

 <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>

 <script>
     // your answer would go here

     $(function () {


         $('#rating-container div').hover(function (mousein) {

             var circle = $(this);
             circle.addClass('rating-hover');
             circle.prevAll().addClass('rating-hover');
             circle.prevAll().andSelf().removeClass('rating-chosen');

       },

       // on mouse out

           function (mouseout) {

               $(this).removeClass('rating-hover');
               $(this).prevAll().removeClass('rating-hover');

              // circle.prevAll().andSelf().removeClass('rating-chosen');


           });

         $('#rating-container div').click(function () {


             var circle = $(this);
             circle.addClass('rating-chosen');

             circle.prevAll().addClass('rating-chosen');
             //getting index of the current circle turned green

             var index = $('#rating-container').children().index(circle);



         });




     });