JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td width="48"><strong>PRICE</strong></td>
    <td width="144"><strong>QTY</strong></td>
    <td width="84"><div align="center"><strong>SUBTOTAL</strong></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=7>$7.00</td>
    <td><input class="productAmount" name="Item1" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=9.54>$9.54</td>
    <td><input class="productAmount" name="Item2" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
  <tr>
    <td class="price" data-amount=11.22>$11.22</td>
    <td><input class="productAmount" name="Item2" type="number" max="5" min="0" value="0"></td>
    <td><div align="center"><span class="total">$0.00</span></div></td>
  </tr>
</table>

JavaScript

var productAmounts = document.getElementsByClassName("productAmount");

Array.prototype.forEach.call(productAmounts, update);

function update(val, i){
  val.addEventListener('input', function(){
    var x = val.value;
    document.getElementsByClassName('total')[i].innerHTML = "$" +
      (x*document.getElementsByClassName('price')[i].getAttribute("data-amount")).toFixed(2);
  });
};