JSFiddle - React, Tailwind, and code Playground

HTML

<p>Input A: <span id="y1"></span></p>
<p>Output A: <span id="x1"></span></p>
<p>Input B: <span id="y2"></span></p>
<p>Output B: <span id="x2"></span></p>
<p>Input C: <span id="y3"></span></p>
<p>Output C: <span id="x3"></span></p>
<p>Input D: <span id="y4"></span></p>
<p>Output D: <span id="x4"></span></p>

JavaScript

function addZeroes( num ) {
    var value = Number(num);
    var res = num.split(".");
    if(res.length == 1 || (res[1].length < 3)) {
        value = value.toFixed(2);
    }
    return value
}

var ww = '1'
var xx = '2.3'
var yy = '3.40'
var zz = '4.567'

document.getElementById('y1').innerHTML = ww;
document.getElementById('y2').innerHTML = xx;
document.getElementById('y3').innerHTML = yy;
document.getElementById('y4').innerHTML = zz;
document.getElementById('x1').innerHTML = addZeroes(ww);
document.getElementById('x2').innerHTML = addZeroes(xx);
document.getElementById('x3').innerHTML = addZeroes(yy);
document.getElementById('x4').innerHTML = addZeroes(zz);