Star Rating

Olá pessoal,bom dia/boa tarde/boa noite;
 
Vou logo adiantando que javascript não é o meu forte.
 
Estou criando um sistema de avaliação por estrelas para uma aplicação minha. Depois de um pouco de trabalho consegui arranjar um código na net e modifiquei para meus propósitos. Nele, existe uma class 'full' que vai enchendo as estrelinhas de acordo com o usuário passa o mouse sobre elas, e quando ele retira o mouse as estrelas voltam a ficar vazias. Cada estrela tem uma pontuação.
O problema é que no código que eu arranjei ele faz a inserção no banco de dados quando o usuário clica na estrela, e no meu caso eu tenho um botão para enviar os dados. Ou seja, eu preciso que quando o usuário clique na estrela, guardar a pontuação dela para usar mais tarde quando o usuário apertar no botão, mostrar as estrelas cheias até onde ele clicou e quando ele tirar o mouse da div não voltar a ficar tudo vazio. E como eu já mencionei antes, sou muito ruim em javascript. Se alguém de vocês puder dar uma ajudinha ou algumas dicas fico muito agradecido. Segue o código que utilizei até agora abaixo: 
 

$(function(){
   $('.star').on('mouseover',function(){
              var indice = $('.star').index(this);
              $('.star').removeClass('full');
              for(var i = 0; i <= indice; i++){
                    $('.star:eq('+i+')').addClass('full');
              }
           });
           
   $('.star').on('mouseout',function(){
           $('.star').removeClass('full');
         });
         
   $('.star').on('click',function(){
           var ponto = $(this).attr('id');
           alert(ponto);       // Esta parte é só uma forma para eu manter o controle, para saber se o ponto corresponde a estrela clicada  
         });
});
  

OBS:
 
#star é o nome da div onde ficam as estrelas;
#full é a class que enche as estrelas;
#cada imagem de estrela possui um id,com uma pontuação diferente;