JSFiddle - React, Tailwind, and code Playground

HTML

<table cellspacing="0" cellpadding="0">
			<tr>
				<td>Quoi ?</td>
				<td>
					<input id="quoi" type="text"></input>
				</td>
				<td></td>
			</tr>
			<tr>
				<td>Qui a payé ?</td>
				<td>
					<select id="qui" onchange="change();">
						<option value=""></option>
						<option value="alex">Alex</option>
						<option value="jean">Jean</option>
						<option value="paul">Paul</option>
						<option value="pierre">Pierre</option>
						<option value="jacques">Jacques</option>
					</select>
				</td>
				<td></td>
			</tr>
			<tr>
				<td>Montant</td>
				<td>
					<input id="montant" type="text"></input>
				</td>
				<td>
					EUR
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input id="ok" type="button" value="Ajouter"></input>
				</td>
				<td></td>
			</tr>
		</table>
		<label id="alex"><input type="checkbox" name="alex">Alex</label>
		<label id="jean"><input type="checkbox" name="jean">Jean</label>
		<label id="paul"><input type="checkbox" name="paul">Paul</label>
		<label id="pierre"><input type="checkbox" name="pierre">Piere</label>
		<label id="jacques"><input type="checkbox" name="jacques">Jacques</label>
		<div id="total"><span>0</span> €</div>
		<div id="history"></div>
		<div id="comptes">
			<div class="alex">Alex : <span>0</span> €</div>
			<div class="jean">Jean : <span>0</span> €</div>
			<div class="paul">Paul : <span>0</span> €</div>
			<div class="pierre">Pierre : <span>0</span> €</div>
			<div class="jacques">Jacques : <span>0</span> €</div>
		</div>
		<div id="equilibre"></div>
		<div id="error"></div>

JavaScript

$(document).ready(function() {
				reset(true);
				$('#ok').live('click', function() {
					total = 0;
					entier = 0;
					var debiteurs = '';
					var user = new Array();
					var solde = new Array();
					var qui = $('#qui').val();
					var quoi = $('#quoi').val();
					var montant = $('#montant').val();
					var classe = $('#montant').attr('class');
					if (quoi != '') {
						if (qui != '') {
							if (montant != '') {
								if (classe != 'wrong') {
									$('input[type="checkbox"]').each(function() {
										if (($(this).prop('checked')) || ($(this).prop('name') == qui)) {	
											total++;
										}
									});
									$('input[type="checkbox"]').each(function() {
										if ($(this).prop('checked')) {
											entier++;
										}
									});
									if (entier > 0) {
										$('#error').html('');
										$('#equilibre').html('');
										var part = arrondi(parseFloat(montant/total));
										$('input[type="checkbox"]').each(function() {
											var name = $(this).prop('name');
											if ($(this).prop('checked')) {
												if ($(this).prop('checked')) {
													debiteurs += ' '+name+',';
												}
												var ecot = arrondi(parseFloat($('.'+name+' span').html()));
												sous = parseFloat(ecot) - parseFloat(part);
												sous = Math.round(sous * 100) / 100;
												sous = (sous > 0) ? '+'+sous : sous;
												$('.'+name+' span').html(sous);
											} else if (name == qui) {
												var ecot = arrondi(parseFloat($('.'+name+' span').html()));
												sous = parseFloat(ecot) + (parseFloat(montant) - parseFloat(part));
												sous = Math.round(sous * 100) / 100;
												sous = (sous > 0) ? '+'+sous : sous;
												$('.'+name+' span').html(sous);
											}
										});
										debiteurs = debiteurs.replace(/,$/, '');
										$('#comptes div').each(function() {
											var fou = $(this).attr('class');
											var value =...