JSFiddle - React, Tailwind, and code Playground

HTML

<form id="purchase">
<table border="1">
    <thead>
    <tr>
  <th>Menu</th>
  <th>Price</th>
  <th>Quantity</th>            
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>Coffee</td>
  <td id="coffeePrice" value="2.99">$2.99</td>
  <td><input type="number" 
       name="quantityCoffee"
       id="quantityCoffee"
           value="0"
       ></td>
  </tr>
  <tr>
  <td>Tea</td>
  <td id="teaPrice" value="1.99">$1.99 </td>
<td><input type="number" 
           name="quantityTea" 
           id="quantityTea"
           value="0"
           ></td>

  </tr>
  <tr>
  <td>Water</td>
<td id="waterPrice" value="1.25">$1.25</td>
<td><input type="number" 
           name="quantityWater" 
           id="quantityWater"
           value="0"
           ></td>
  </tr>
  </tbody>
  </table>
   <input type="button"
           name="totalCost" 
           value="Total Cost"
          id="checkCost">
    <textarea id="display"></textarea>
</form>

JavaScript

document.getElementById("checkCost").onclick = function totalCost(e){
    e.preventDefault();
var qC= document.getElementById("quantityCoffee").value;
var qT= document.getElementById("quantityTea").value;
var qW= document.getElementById("quantityWater").value;
var sum= (qC*2.99)+(qT*1.99)+(qW * 1.25);

document.getElementById("display").innerHTML =  "Cost is " + sum;

 }