JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<li class="product-item" data-price="36900" data-discount="18.97">Item 1</li>
<br/>
<div>Valor total: R$ <span id="result">0</span></div>

CSS

body {
  color: #FFF;
  font-family: sans-serif;
  background-color: #20262e;
}

JavaScript

function formatReal(int) {
  var tmp = int + '';
  tmp = tmp.replace(/([0-9]{2})$/g, ",$1");
  if (tmp.length > 6) {
    tmp = tmp.replace(/([0-9]{3}),([0-9]{2}$)/g, ".$1,$2");
  }
  return tmp;
}

function formatDiscount(price, discount) {
  var priceFinal = '';
  price = parseFloat(price);
  discount = parseFloat(discount);
  discount = (price * discount) / 100;
  priceFinal = (price - discount);
  return formatReal(priceFinal.toFixed())
}

var subTotal = 0;
$('.product-item').each(function (){
	var itemValue = $(this).attr('data-price');
	subTotal = parse(subTotal) + parse(itemValue);					
	$('#result').text('R$ '+formatReal(subTotal))
})