title: Jquery passing attributes to div
body: <p>I am currently attempting to make the Circle Diagram Jquery by Monochromer responsive to events / changes on a page. That is, if I change a form field percent, the chart updates.</p>
  
  <p><a href="http://www.jqueryscript.net/demo/Customizable-Circular-Progress-Bar-with-jQuery-CSS3-Circle-Diagram/" rel="nofollow">http://www.jqueryscript.net/demo/Customizable-Circular-Progress-Bar-with-jQuery-CSS3-Circle-Diagram/</a></p>
  
  <p>I made a fiddle here:
  <a href="http://jsfiddle.net/brandrally/x3ag25q2/" rel="nofollow">http://jsfiddle.net/brandrally/x3ag25q2/</a></p>
  
  <p>I am not sure whether I have missed something in my code or whether my base logic is flawed, no matter what I adjust, I just don't seem to be able to make it work. </p>
  
  <p><strong>The Initial Chart setup JS:</strong></p>
  
  <pre><code>window.onload=function(){
  $(function() {
  $('#diagram').diagram({ 
  size: "200",
  });
  })
  
  $(document).ready(function() {      
  $("input[name$='percentages']").click(function() {
  var req = $(this).val();
  
  $('#displayresult').html(+ req);    
  $('#diagram').attr('data-percent','+ req');
  
  
  });
  });
  </code></pre>
  
  <p><strong>The HTML</strong> </p>
  
  <pre><code>&lt;!-- The Diagram --&gt;
  &lt;div id="diagram" class="diagram" data-percent="30.00"&gt;&lt;/div&gt;
  &lt;!-- The Form Field --&gt;
  &lt;label&gt;&lt;input name="percentages" id="percentages" type="radio" value="20.00" &gt;20%&lt;/label&gt;
  &lt;label&gt;&lt;input name="percentages" id="percentages" type="radio" value="40.00" &gt;40%&lt;/label&gt;
  </code></pre>