title: Can't update data-attribute value
body: <p>Although there are some examples of this on the web, it does not seem to work correctly. I can't figure out the problem.</p>
  <p>I have this simple HTML</p>
  <pre><code>&lt;div id=&quot;foo&quot; data-num=&quot;0&quot;&gt;&lt;/ div&gt;
  &lt;a href=&quot;#&quot; id=&quot;changeData&quot;&gt;change data value&lt;/a&gt;
  </code></pre>
  <p>Every time I click the link &quot;change data value&quot; I want to update the data value of data-num.
  For example, I need it to be 1,2,3,4,... (plus 1 every time I click the link)</p>
  <p>what I have is</p>
  <pre><code>var num = $('#foo').data(&quot;num&quot;);
  console.log(num);
  num = num+1;               
  console.log(num);
  $('#foo').attr('data-num', num);   
  </code></pre>
  <p>The value changes one time from 0 to 1 every time. I can't make it incremental. Any suggestions on what I'm doing wrong?</p>