JSFiddle - React, Tailwind, and code Playground

HTML

<form>
<input id="quantity" class="qty" type="text" placeholder="quantity" />
    <br>
    <input type="button" value="Calculate" id="calc"/>
</form>

<!--display total cost here--> 
<span>The Cost is: <span id="total">totalcost</span></span>

JavaScript

document.getElementById('calc').addEventListener('click', updater);

function updater () {
    var cost = 25;
    var quantity = document.getElementById('quantity').value;
    var totalcost = (cost * quantity);
    
    document.getElementById('total').innerText = totalcost;
}