JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" onclick="changeSizeByBtn(0.75)" name="btn1">-A</button>
<button type="button" onclick="changeSizeByBtn(1)" name="btn2">A</button>
<button type="button" onclick="changeSizeByBtn(1.25)" name="btn3">A+</button>
<hr />
<div id="container">
<h1>This is the title</h1>
<h2>This is a sub title</h2>
<p>I need to increase the texts here by clicking on A+ button and decrease them by clicking -A button above. <br />
The problem here is that it increase/decrease only once. I want it to increase or decrease twice by say 10%. Not Thrice but just twice. How can I go about doing this?
</p>
    </div>

CSS

div {
  padding: 20px;
  border: 5px solid red;  
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
p {
  font-size: 1em;
}

JavaScript

var cont = document.getElementById("container");
function changeSizeByBtn(size) {
  cont.style.fontSize = size + "em"; // <- HERE
}