title: Jquery not updating css onclick
body: <p>I am having a JQuery problem today here's the code dump to start us off</p>
  
  <pre><code>$(function() {
      var distance = 0;
      $('.right').click(function() {
          distance -= 100;
          $('#container').css('transform', 'translateX(' + distance + '%)')
          console.log(distance);
      });
      $('.left').click(function() {
          distance += 100;
          $('#container').css('transform', 'translateX(' + distance + '%);')
          console.log(distance);
      });
  });
  </code></pre>
  
  <p>What this code is doing is move width of the users page 100% to the left or 100% to the right. When I click a button with a class name of 'right' it works all fine, but when I click a class name of 'left' it displays it in the console as it should but it doesn't move the page, it needs me to press another button before it updates.</p>