JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
      <th> Small Pizza </th>
      <td> $9.00 </td>
      <td> <input type = "text"  name = "smal" id = "small"  
                  size ="2" /> </td>
    </tr>
    <tr>
      <th> Medium Pizza </th>
      <td> $11.00 </td>
      <td> <input type = "text"  name = "medium" id = "medium"  
            size = "2" /> </td>
    </tr> 
    <tr>
      <th> Large Pizza </th>
      <td> $13.00 </td>
      <td> <input type = "text"  name = "large" id = "large"  
            size = "2"  /></td>
    </tr>
  </table>
    <br><br>

    <input type ="checkbox" name = "pepp" id ="pepp" > Pepperoni <br>
    <input type ="checkbox" name = "sausage" id ="sausage" > Sausage <br>
    <input type ="checkbox" name = "pineapple" id ="pineapple" > Pineapple <br>
    <input type ="checkbox" name = "bacon" id ="bacon" > Bacon<br>
    <input type ="checkbox" name = "mushroom" id ="mushroom" > Mushroom <br>

     <p>
    <input type = "button"  value = "Total Cost" 
           onclick ="computeCost();" />
    <input type = "text"  size = "5"  id = "txtCost" 
           name = "txtCost" onfocus ="this.blur();" />
  </p>

JavaScript

function computeCost() {
  var small = document.getElementById("small").value;
  small = Number(small);

  var medium = document.getElementById("medium").value;
  medium = Number(medium);

  var large = document.getElementById("large").value;
  large = Number(large);

  var pepp  = document.getElementById("pepp").checked,
      saus  = document.getElementById("sausage").checked,
      pine  = document.getElementById("pineapple").checked,
      bacon = document.getElementById("bacon").checked,
      mush  = document.getElementById("mushroom").checked;
  
  document.getElementById("txtCost").value = 
    (small*9 + medium*11 + large*13) +
    (small + medium + large) * (pepp + saus + pine + bacon + mush);
}