<div class="container">
  <div class="row">
    <div class="panel panel-default col-xs-12 col-md-4 col-md-offset-4">
        <div class="panel-body">
          <h1>How is it going?</h1>
          <i class="fa fa-star-o" aria-hidden="true"></i>
          <i class="fa fa-star-o" aria-hidden="true"></i>
          <i class="fa fa-star-o" aria-hidden="true"></i>
          <i class="fa fa-star-o" aria-hidden="true"></i>
          <i class="fa fa-star-o" aria-hidden="true"></i> 
        </div>
        <div class="panel-footer">
          <button class="btn btn-default btn-lg">Rate</button>
        </div>
      </div>
    </div>
  </div>

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

$brightyellow: #AA9339;
$dimyellow: #7F6A15; 
$blue: #2C4770;
$lightblue: #4C668C;
$darkblue: #142F54;
$veryDarkBlue: #051A38;  
  
body {
  background-color: $lightblue;
  font-family: 'Indie Flower', cursive;
}

.panel-default {
  &, 
  .panel-footer {
  background-color: $blue;
  border: 0;
  padding-bottom: 1.5rem;
  }
}

.row {
  margin-top: 3rem;
  text-align: center;
}

.fa-star-o, 
.fa-star {
  font-size: 5rem;
  color: $dimyellow;
  cursor: pointer;
}

h1 {
  color: $brightyellow;
}

button {
  font-family: 'Open Sans', sans-serif;  
}

.btn-default {
  background-color: $darkblue;
  border: none; 
  color: #AA9339;
  min-width: 50%;
  &:hover,
  &:active,
  &:focus {
    background-color: $veryDarkBlue;
    color: #AA9339;
    outline: 0;
  }
}

//change star to fa-star **on hover** of element hovered and all soblings before (prevAll)

$("div i").hover(function() {
  
  var $this = $(this);
  $this.nextAll().removeClass('fa-star').addClass( "fa-star-o" );
  $this.prevUntil("h1").removeClass( "fa-star-o" ).addClass('fa-star');
  $this.removeClass( "fa-star-o" ).addClass('fa-star');
});

//**on mouseOut** change back to fa-star-o OR the result of the click event

$("div i").mouseout(function() {
  
  var select = $('.active');
  select.nextAll().removeClass('fa-star').addClass('fa-star-o');
  select.prevUntil("h1").removeClass('fa-star-o').addClass('fa-star');
  select.removeClass('fa-star-o').addClass('fa-star');
  
});

//on Click change star to fa-star and change color to red (prevAll)

$("div i").click(function () {
  $(this).addClass('active').siblings().removeClass('active');
  $(this).attr("style","color:#FFDFAA");
  $(this).prevUntil("h1").css("color","#FFDFAA");
  $(this).nextAll().css("color","#7F6A15");
 
});