title: Add dynamic data-attribute with jQuery
body: <p>Is there a way to add a "dynamic" data-attribute to a DOM element with jQuery?</p>
  
  <p>This, for example, doesn't work:</p>
  
  <pre><code>var value = 100;
  
  // hoping to add a 'data-100' attribute 
  $('div').attr({
    String('data-' + value) :'display: block'
  });
  </code></pre>
  
  <p>It throws the error:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token (
  </code></pre>
  
  <p>obs: as far as I know if you sum a string with an integer in JS, it will cast everthing as a String, but anyway I tried with String() because maybe in some language that worked for me once.</p>
  
  <p>This obviously won't work (it will add the 'custom_data' and not the 'data-100' attribute):</p>
  
  <pre><code>var custom_data = 'data-100';
  
  // hoping to add a 'data-100' attribute 
  $('div').attr({
    custom_data :'display: block'
  });
  </code></pre>