JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<span>Dinero</span>
<input type="text" value="50000000" id="money" />
</div>
<div>
<span>Jugadores</span>
<input type="text" value="16" id="members" />
</div>
<input type="button" value="Calcular" onclick="window.calcular()" />
<table border="1" id="table">
<thead>
<tr>
<th>Posición</th>
<th>Cantidad</th>
<th>Porcentaje</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th></th>
<th id="totalprize" style="font-weight:bold"></th>
<th id="totalpercentage" style="font-weight:bold"></th>
</tr>
</tfoot>
</table>
JavaScript
window.calcular = function() {
var table = document.getElementById('table');
var element = table.getElementsByTagName('tbody');
for (index = element.length - 1; index >= 0; index--) {
element[index].parentNode.removeChild(element[index]);
}
var prizes = [];
var money = Number(document.getElementById('money').value);
var members = Number(document.getElementById('members').value);
var totalPct = 0;
for (var i = 0; i < members; i++) {
totalPct += (i + 1);
}
var totalRatio = 0;
var all = 0;
for(var i=0;i < members; i++){
var ratio = (i+1) / totalPct;
totalRatio += ratio;
prizes[i] = {
prize: Math.round(money * ratio),
ratio: ratio
};
all += prizes[i].prize;
}
prizes.reverse();
var tbody = document.createElement('tbody');
for(var i = 0; i < prizes.length; i++) {
var tr = document.createElement('tr');
var position = document.createElement('td');
var prize = document.createElement('td');
var ratio = document.createElement('td');
position.textContent = i + 1 + 'º';
prize.textContent = prizes[i].prize;
ratio.textContent = Math.round(prizes[i].ratio * 10000, 2) / 100 + '%';
tr.appendChild(position);
tr.appendChild(prize);
tr.appendChild(ratio);
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.getElementById('totalprize').textContent = all;
document.getElementById('totalpercentage').textContent = totalRatio * 100 + '%';
console.log('TOTAL SUM', all, totalRatio);
}