title: jQuery not getting current data values
body: <p>I've got some variables that I need to pass in jQuery/HTML for further use. I've got randomly generated number that I need to use later so I'm saving it as <code>data-spin</code> on parent element.</p>
  
  <p>When I'm trying to access the data, it stays the same - it's set once and even when the value is changed, the variable still says the first value.</p>
  
  <pre><code>$('#parent').scroll(function() {
      var number = 1 + Math.floor(Math.random() * (12));
      $('#parent').attr('data-spin', number);
  
      console.log($('#parent').data('spin'));
  });
  </code></pre>
  
  <p>I tried attaching the function to <code>.scroll</code> function or no function at all but the result is same.</p>
  
  <p>I'm attaching the jsfiddle example. The random number is logged at the first line, stored data at second.</p>
  
  <p>Any ideas why it's not taking the current value of the field?</p>
  
  <p>The variable is used in different function so I can't use the <code>number</code> variable.</p>
  
  <p><a href="https://jsfiddle.net/orou3kLy/" rel="nofollow noreferrer">https://jsfiddle.net/orou3kLy/</a></p>