JSFiddle - React, Tailwind, and code Playground

HTML

<span id="number-container">
    <input type="number" name="number" id="number-field" value="500.01" step="0.01" />
    <span id="number-container-symbol">$ <span id="number-container-value"></span></span>
</span>

CSS

/* to show the difference: */
#number-container-value {
    color: blue;
}


#number-container {
    position: relative;
}
#number-container-symbol {
    color: blue;
    left: 5pt;
    position: absolute;
    top: 0px;
}
#number-field {
    background-color: transparent;
    padding-left: 10pt;
}

JavaScript

var input_field = jQuery('#number-field');
var display_span = jQuery('#number-container-value');
var base_val = parseFloat(input_field.val());
input_field.data('storedVal', base_val);
input_field.val('');
display_span.html(base_val);

jQuery('#number-field').on('focus', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    if (typeof el.data('storedVal') != 'undefined'){
        el.val(el.data('storedVal'));
    };
    display.html('');
}).on('blur', function(event){
    var el = jQuery(this);
    var display = jQuery('#number-container-value');
    var new_val = parseFloat(el.val());
    el.data('storedVal', new_val);
    display.html(new_val);
    el.val('');
});