JSFiddle - React, Tailwind, and code Playground

HTML

<table id='worksheet_table' class="table table-striped">
            <thead>
              <tr>
                <th>Package</th>
                <th>Number in Package</th>
                <th>Number Used</th>
                <th>Price</th>
                <th>Revenue</th>
                <th>Value</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td id="package" name="package">1</td>
                <td id="inPackage" name="inPackage">50</td>
                <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td>
                <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td>
                <td name="revenue" id="revenue"></td>
                <td name="value" id="value"></td>
              </tr>
              <tr>
                <td id="package" name="package">2</td>
                <td id="inPackage" name="inPackage">100</td>
                <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td>
                <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td>
                <td name="revenue" id="revenue"></td>
                <td name="value" id="value"></td>
              </tr>
            </tbody>
          </table>

JavaScript

function getValues()
  {
    var numberUsed = Number(document.getElementById('numberUsed').value);
    var price = Number(document.getElementById('price').value);
    var inPackage = Number(document.getElementById('inPackage').value);
    var revenue = 0;
    if (numberUsed=="")
    {
      revenue = price * inPackage;
    }
    else
    {
      revenue = price * numberUsed;
    }
    var value = revenue * 5;
    document.getElementById("revenue").innerHTML = revenue;
    document.getElementById("value").innerHTML = value;
  }