JSFiddle - React, Tailwind, and code Playground

HTML

<span>Anna rahamäärä (valinnainen): <input type="text" style="width:40px;" id="givenTotal" /><button id="changeMoney">
Muuta summa
</button></span>

<!-- ##################### Rahapainikkeet ############################ -->
<div class="button-container">
  <Span>Sataset 
    <button class="addMoney" value="100"> + </button>
   <button class="removeMoney" value="100"> - </button>
 </Span>
</div>
<div class="button-container">
  <Span>Viiskymppiset 
   <button class="addMoney" value="50"> + </button>
   <button class="removeMoney" value="50"> - </button>
 </Span>
</div>
<div class="button-container">
  <Span>Kympit 
    <button class="addMoney" value="10"> + </button>
    <button class="removeMoney" value="10"> - </button>
 </Span>
</div>
<div class="button-container">
  <Span>Eurot 
    <button class="addMoney" value="1"> + </button>
   <button class="removeMoney" value="1"> - </button>
 </Span>
</div>
<!-- ################################################################# -->

<!-- ###################### Rahamäärät ################################# -->
<span>Rahaa löytyy <label id="total"></label> euroa</span>
<!-- ################################################################# -->

<hr />
<!-- ###################### Sataset ################################# -->
<div class="chip-container" id="100">
  <div class="chip chip-100"></div>
</div>
<!-- ################################################################# -->

<!-- ###################### Viiskymppiset ############################ -->
<div class="chip-container" id="50">
  <div class="chip chip-50"></div>
</div>
<!-- ################################################################# -->

<!-- ######################## Kympit ################################# -->
<div class="chip-container" id="10">
  <div class="chip chip-10"></div>
</div>
<!-- ################################################################# -->

<!-- ###################### Eurot ################################# -->
<div...

CSS

.button-container {
  display:inline-block;
  width:100%;
  margin-bottom:5px;
}

.chip-container {
  width:170px;
  float:left;
  display:inline-block;
  padding:10px;
}
.chip {
  width:150px;
  height:30px;
  text-align:center;
  font-weight:bold;
  border-radius:5px;
  line-height:30px;
  border:2px solid black;
}
.chip:nth-child(2n+2) {
    margin-left:10px;
}

.chip-100
{
  background-color:blue;
}

.chip-100:after {
    content: "100€";
}
.chip-50
{
  background-color:red;
}
.chip-50:after {
    content: "50€";
}
.chip-10
{
  background-color:yellow;
}
.chip-10:after {
    content: "10€";
}
.chip-1
{
  background-color:orange;
}
.chip-1:after {
    content: "1€";
}

JavaScript

$(document).ready(function(){
  //Lasketaan alkurahat
  calcTotal();
  
  //Muutetaan rahasumma
  $("#changeMoney").click(function() {
  	changesum($("#givenTotal").val());
  });
  
  //Lisätään rahaa
	$(".addMoney").click(function() {
    var moneyValue = $(this).attr("value")
  	$("#" + moneyValue).prepend("<div class='chip chip-" + moneyValue + "'></div>");
     calcTotal();
  });
  //Poistetaan rahaa
  $(".removeMoney").click(function() {
    var moneyValue = $(this).attr("value")
  	$("#" + moneyValue + " .chip").first().remove();
    calcTotal();
  });
});


function calcTotal() {
	$("#total").text(($(".chip-100").length * 100) + ($(".chip-50").length * 50) + ($(".chip-10").length * 10) + ($(".chip-1").length));
}

function changesum(newTotal) {
  var total = parseInt(newTotal);
  if (/\D/g.test(total))
  {
		alert("ei ole numero tämä ei");
  }
  else
  {
  	calcChips(calcChips(calcChips(calcChips(total, 100),50),10),1);
    calcTotal();
  }
}

function calcChips(remaining, divider)
{
	var value = parseInt(remaining / divider);
  $("#" + divider).empty().append(("<div class='chip chip-" + divider + "'></div>").times(value));
  return remaining - divider * value;
}
String.prototype.times = function(n) {
    return Array.prototype.join.call({length: n+1}, this);
};