title: How to generate the sum of values
body: <p>My HTML code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(":checkbox").change(function() {    
    var arr = $(":checkbox:checked").map(function() { 
      return $(this).next().text(); 
    }).get();
  
    var myVal = $(":checkbox:checked").map(function() { 
      return ($(this).attr('data-marks'));
    }).get();
  
    var myPoint = $(":checkbox:checked").map(function() { 
      var sum = 0;
      var count = parseFloat($(this).attr('data-marks'));
      sum = sum + count;
      return sum;
    }).get();
  
    $("#myDiv, #myTop").html(arr.join('&lt;br&gt;&lt;br&gt;'));
    $('#myVal').html(myVal.join('&lt;br&gt;&lt;br&gt;'));
    $('#totalGrade').text(myPoint); 
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li&gt;&lt;input id="c1" data-marks="20" type="checkbox" /&gt;&lt;label for="c1"&gt;abc&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;input id="c1" data-marks="15" type="checkbox" /&gt;&lt;label for="c1"&gt;xyz&lt;/label&gt;&lt;/li&gt;
  &lt;li&gt;&lt;input id="c1" data-marks="30" type="checkbox" /&gt;&lt;label for="c1"&gt;pqr&lt;/label&gt;&lt;/li&gt;
  
  &lt;div id="myDiv"&gt;&lt;/div&gt;
  &lt;div id="myMarks"&gt;&lt;/div&gt;
  &lt;div id="total"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
                  </p>
  
  <p>Here, I am copying the content(i.e. abc,xyz,pqr) and marks(20,15,30) relative to input checkbox into another div.While I am trying to get the respective sum of marks into the third div(i.e. total), it is coming up as a string. I am getting value as 201530 during checkbox event.
   What am I missing here?</p>