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 = '';	
	discount = parseFloat(discount);
	price = parseFloat(price);	
	discount = (price * discount) / 100;	
	priceFinal = (price - discount);
	console.log(priceFinal);	
	return formatReal(priceFinal.toFixed())	
}

var price = $('.product-item').attr('data-price');
var discount = $('.product-item').attr('data-discount');

$('#result').text(formatDiscount(price, discount))