JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<p class="item" data-price="2" data-qty="1">item 1</p>
<p class="item" data-price="12" data-qty="4">item 2</p>
<p class="item" data-price="4" data-qty="2">item 3</p>
<h3></h3>

JavaScript

// Calculate value of all attributes and display answer instantly (07-12-2015)
// Alexander Dixon - Solution
// HTML 5 Data Attributes
// http://stackoverflow.com/questions/31374333/loop-and-select-every-element-in-dom

var sum = 0;
$("p.item").each(function(i){
    var items = "p.item:eq(" + i + ")";
    sum +=  parseInt($(items).data("price"), 10) * parseInt($(items).data("qty"), 10);
});

$("h3").text(sum);