Control transform: scaleX & transform: scaleY independently with javascript on the same object using sliders

Question

The following code allows them to be controlled individually, my issue is if you adjust one, then adjust the other, the value for the first you adjusted is lost (removed) instead of added (appended?) to the inline css.

function scaleXfont(e) {
  var scaleamount = document.getElementById("scaleXslider").value;
  document.getElementById("transscale").style.transform = "scaleX(" + scaleamount + ")";
  currentcss();
}

function scaleYfont(e) {
  var scaleamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scaleY(" + scaleamount + ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
}

<div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>

Answer 1

Now solved by grabbing both slider values and applying them at the same time using

var scaleXamount = document.getElementById("scaleXslider").value;

var scaleYamount = document.getElementById("scaleYslider").value;

style.transform = "scale(" + scaleXamount + ", " + scaleYamount + ")";

It was the comment

transform will need to have both scales set in it all the time.

that made me think this way so thank you.

Working code..

function scalefont(e) {
  var scaleXamount = document.getElementById("scaleXslider").value;
  var scaleYamount = document.getElementById("scaleYslider").value;
  document.getElementById("transscale").style.transform = "scale(" + scaleXamount + ", " + scaleYamount + ")";
  currentcss();
}

function currentcss() {
document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText;
}

<div class="singlecontrol">
<span style="vertical-align: middle;">ScaleX</span>
<input style="vertical-align: middle;" id="scaleXslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" />
</div>

<div class="singlecontrol"
><span style="vertical-align: middle;">ScaleY</span>
<input style="vertical-align: middle;" id="scaleYslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" /></div>

<div id="cssinuse">
Current CSS = <br />
<span id="currentcss"></span>
</div>
<br /><br />
<div style="display:inline-block; width:100%; text-align:center;">
<div id="transscale">Stretch/Flip Me</div>
</div>