title: Adding values of multiple checkboxes together; displaying a sum at the end...
body: <p>I am trying to create a spry accordion menu with a checkbox in each panel. This panel directly relates to a number of college credits. When that checkbox is clicked, along with how many other clicked checkboxes, a sum should display at the end of the page for the label - Total Number of Transfer Credits. </p>
  
  <p>Here's the site I have so far (live): <a href="http://webfro.gs/south/toc/" rel="nofollow">http://webfro.gs/south/toc/</a></p>
  
  <p>On this jsfiddle, you can see what I'm ultimately trying to do... <a href="http://jsfiddle.net/jlnewnam/dC8T2/" rel="nofollow">http://jsfiddle.net/jlnewnam/dC8T2/</a> </p>
  
  <p><strong>Here's the HTML:</strong></p>
  
  <pre><code>&lt;div id="course_id"&gt;
      &lt;input type="checkbox" value="3" /&gt;&amp;nbsp; ASP100&lt;br/&gt;
      &lt;input type="checkbox" value="4" /&gt;&amp;nbsp; COM104&lt;br/&gt;
      &lt;input type="checkbox" value="1" /&gt;&amp;nbsp; ECO202&lt;br/&gt;
      &lt;input type="checkbox" value="3" /&gt;&amp;nbsp; MAT111&lt;br/&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  Total Potential Transfer Credits: &lt;div id='total_potential'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Here's the JavaScript:</strong> </p>
  
  <pre><code>jQuery(document).ready(function($) {
      var sum = 0;
      $('#course_id :checkbox').click(function() {
          sum = 0;
          $('#course_id :checkbox:checked').each(function(idx, elm) {
              sum += parseInt(elm.value, 10);
          });
  
          $('#total_potential').html(sum);
  
      });
  
  });
  </code></pre>
  
  <p>You'll notice that as you click each checkbox, the sum of the total number of credits increases. </p>
  
  <p>I can't seem to pull this off in the spry menu. I guess it's because each panel has it's own ID, and I can't figure out the separation I need to accomplish the goal. </p>
  
  <p>Regards, </p>
  
  <p>KT</p>