title: How do I make a counter with jQuery that also keeps high score?
body: <p>I'm working on making a really simple counter for trivia games that also keeps the high score. It's working decently well except for two problems: </p>
  
  <p>1) When I click refresh current score to get the current score back to zero, it refreshes properly but then as soon as I start clicking the score button it resets the high score as well.</p>
  
  <p>2) My .animate() won't work on either and I don't understand why?</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;header class="controls"&gt;
      &lt;div id="refresh-score"&gt;&lt;/div&gt;
      &lt;p class="scoreboard"&gt;HIGH | &lt;span id="high-score-value"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/header&gt;
  &lt;h1 class="title-big" id="current-score-value"&gt;&lt;div id="overlay"&gt;&lt;/div&gt;&lt;/h1&gt;
  &lt;div id="score-button"&gt;+&lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="car-trivia.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(function(){
      var currentScore = 0;
      var highScore = 0;
  
      $('#high-score-value').append(highScore);
  
      $('#current-score-value').append(currentScore);
  
      $('#refresh-score').click(function(){
          console.log("refresh click");
          currentScore = 0;
          $('#current-score-value').html(currentScore);
          $('#refresh-score').animate({
              transform: "rotate(-360deg)"
          }, 500);
      });
  
      $('#score-button').click(function(){
          console.log("score click");
          currentScore++;
          $('#current-score-value').html(currentScore);
          if (currentScore &gt; highScore) {
              $('#high-score-value').html(currentScore);
          } else {
              $('#high-score-value').html(highScore);
          }
      };
  
      $('.overlay').animate({
          width: "200vw",
          height: "200vw"
          }, 500)
      });
  
  })
  </code></pre>