JSFiddle - React, Tailwind, and code Playground

HTML

<input id=width type="text" value="0"></input>
<input id=height type="text" value="0"></input>
<input id=per-can type="text" value="32.5" class="field left" readonly>
<input id=cost type="text" value="18.23" class="field left" readonly>
<input id=size type="text" value="2.5" class="field left" readonly>
<div>
    <p>Total:<span id=added></span>

    </p>
    <p>No. of Cans:<span id=cans></span>

    </p>
    <p id="error"></p>
</div>

CSS

input {
    margin: 5px;
    width: 50px;
}

JavaScript

$('input').keyup(function () { // run anytime the value changes


    var firstValue = parseFloat($('#width').val()); // get value of field
    var secondValue = parseFloat($('#height').val());
    var thirdValue = parseFloat($('#per-can').val()); // convert it to a float
    var forthValue = parseFloat($('#cost').val());
    var fithValue = parseFloat($('#size').val());

    var canCount = firstValue * secondValue / thirdValue;
    
    $('#added').html((canCount * forthValue).toFixed(2));
    $('#cans').html(canCount.toFixed(2));
    
    if (Math.ceil(canCount) < 2 ) {
        $('#error').html("Need at least 1!");
    } else {
         $('#error').empty();   
    }
    
    
    



});