JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Embedded css style -->
<body style="background-color: #c4c7c6; color: #000;font-family: Times New Roman, Times, serif;font-size: 62.5%; position: relative">

<header>
    <h1>Sample</h1>
</header>

<div class= "container">

<main> 

<br>

<form>
    <fieldset>
        <legend>
            Customer's Information
        </legend>
    <!--asks for name-->
    <label for="nameInput">Name</label>
    <input type="text" id="nameInput" name="name" placeholder="John Doe" />
    
    <br><br> 
    Drink Order:    
    <!--asks for coffee type-->
    <select name="drinkType" id="drinkType">
        <option value="#">Select Drink</option>
        <option value="0">Tea  $2.25</option>
        <option value="1">Coke  $2.50</option>
        <option value="2">Coffee  $2.25</option>
    </select>
    <br><br>
    <label for="subtotal">Subtotal :</label>
    <input type="text" id="subtotal" disabled>
    <br>
    <label>&nbsp;</label>
    <input type="button" id="placeOrderBtn" value="Place Order">    
  <br><br>
 
</fieldset>
</form>
<br>
<h3 class = "hiddenReceipt">Receipt</h3>
<br>
<div id = "receiptO">
<table id = "receiptOrders">  
    <thead>
        <tr>
            <th>Item Number</th>
            <th>Name</th>
            <th>Type of Coffee</th>
            <th>Subtotal</th>
            <th>Edit/Save</th>
             <th><input type="button" id="deleteRowBtn" value="Delete Row"></th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</div>    
</main>

</div><!-- end .container -->

CSS

/* Removes all default margin and padding */
* {
	margin: 0px;
	padding: 0px;
}

.container {
	background-color: #fff;
	margin: 0px auto; 
	width: 80%;
}

fieldset {
   border-top: 2px solid #ddd;
   border-right: 1px solid #fff;
   border-bottom: 1px solid #fff;
   border-left: 1px solid #fff;
   font-size: 1.2rem;
   margin-left: -10px;
   margin-top: 10px;
   padding-left: .5em;
   width: 400px;
}

/* Centering Customer's Info text */
legend, label {
    font-size: 1.2rem;
    text-align: center;
    padding: 0 .25em;
}

/* Disabled field boxes */
input[type=text]:disabled {
	background-color: #eee;
}

#placeOrderBtn {
    margin-left: -15px;
}

#receiptOrders tbody { 
  counter-reset: rowNumber;
}

/* lists item number */
#receiptOrders tr {
    counter-increment: rowNumber;
}

/* displays item number */
#receiptOrders tbody tr td:first-child:before { 
    content: counter(rowNumber);
}

/*merged cells are grayed out*/
.grayedOut {
    background-color: #aaa; 
}

table, th, td {
    font-size: 1.0rem;
    border-collapse: collapse;
    text-align: center;
}

th {
    background-color: #dcedec;
    border: 1px solid #aaa;
    padding: .2em;
}

td {
    border: 1px solid #aaa;
    padding: .3em;
}

/* Grand Total cell */
#grandTotalTitle {
    background-color: #f7f6a0;
    border: 1px solid #aaa;
}

JavaScript

// if errors JavaScript will stop running
"use strict";

// Global Variables

var amt = 0; 
var temp = $("input[name=temp]:radio") // gets temperature radio button
var totalDrinkCost = 0;
var drinkName; // drink names
var itemNumber; // for receipt purposes

// arrays
var drinkCosts = [2.25, 2.50, 2.25]; // costs of each drink type
var drinkCostsHolder = []; // holds each drin costs
var namesInputsHolder =[]; // holds each customer's name
var drinkTypeNamesHolder = []; // holds each drink type
var subtotalHolder = []; // holds each customer's subtotal
var result = []; // holds subtotal in delete function

// ready event: short way
// long way: $(document).ready(function()){
$(function() {    
    // change
    $("select").change(processOrder); // select tags

  
    // calculates total cost
    $("#placeOrderBtn").click(function() {
        if ($("#drinkType").val() == "#") {
            alert ("Please select a drink type");
        } else {
        var nameInput = $("#nameInput").val(); // gets id: name value from HTML page
        var drink = parseInt($("#drinkType").val()); // gets id: drinkType value from HTML page
        var totalList = 0; 
        var subtotal = parseFloat($("#subtotal").val());
        subtotal = subtotal.toFixed(2);  // converts to string, 2 numbers after decimal

   
    // adds new item to the end of the array using push method
    namesInputsHolder.push(nameInput); // adds name
    drinkTypeNamesHolder.push(drinkTypeName(drink)); // adds drink type
    
    subtotalHolder.push(subtotal); // adds subtotal cost
    
    // i retrieves each element from the array
    for (var i = 0; i < namesInputsHolder.length; i++) { 
        totalList = "<tr><td></td><td>" + namesInputsHolder[i] + "</td><td>" + drinkTypeNamesHolder[i] + "</td><td>" + subtotalHolder[i] + "</td><td></td><td><input type='checkbox'></td></tr>";    
    }
    
    $("#receiptOrders > tbody").append(totalList); // table: tbody: children
    }
        
    // deletes row 
  ...