title: jQuery adding to current margin-left value
body: <p>I have two div buttons, 'slide-forward' and 'slide-back'. They need to control the value of margin-left on my div '.inner'. Each time one of the buttons is clicked, it needs to subtract or add 100% to the current margin-left of 'inner'.</p>
  
  <p>Suppose the current margin-left value of '.inner' is set at -300%.
  On click of 'slide-forward' the result would be margin-left -200%.
  Then on click of 'slide-backward' the result would be margin-left -300%.
  If user clicks on 'slide-backward' again, result would be margin-left -400%.</p>
  
  <p>So essentially, on click my buttons, my div's margin-left would add or subtract incrementally. It's vital that the value is in % not px.</p>
  
  <p>I apologize if this is hard to understand. It's a bit hard to explain. If you don't understand what I'm trying to do please say so and I will break it down further.</p>
  
  <p>My code (doesn't quite  work):</p>
  
  <pre><code>$('.slide-back').data('marginLeft', '0').on('click',function(){
      var $inner = $('.inner'),
          curMarg = $(this).data('marginLeft') + 100;
  
      $inner.css({marginLeft:curMarg+'%'});
      $(this).data('marginLeft',curMarg);
  });
  
  $('.slide-forward').data('marginLeft', '0').on('click',function(){
      var $inner = $('.inner'),
          curMarg = $(this).data('marginLeft') - 100;
  
      $inner.css({marginLeft:curMarg+'%'});
      $(this).data('marginLeft',curMarg);
  });
  </code></pre>