JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<table id="myTable" border="1">
<thead>
<th>Order #</th>
<th>Name</th>
<th>Tea Order</th>
<th>Tea Size</th>
</thead>

<tbody>
  <tr>
    <td>1</td>
    <td>Shakespeare</td>
    <td>Iced</td>
     <td>Small</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Frost</td>
    <td>Hot</td>
      <td>Medium</td>
  </tr>
  </tbody>
</table>
<br>
<input id="deleteRowBtn" type="button" value="Delete Row" />
<input id="editBtn" type="button" value="edt" />
<input id="saveBtn" type="button" value="saveChange" />
<br>
<br>   
<form name="create"2 style="width:80px;">
Name:<input type="text" id="txtname" />
<br>
Tea Order:<input type="text" id="txtTeaOrder" name="txtTeaOrder" />
<br>
Tea Size<input type="text" id="txtTeaSize" name="txtTeaSize" />
<br>
</form>
</body>

JavaScript

"use strict";
var orderNumberHolder=[];

// returns a html element (id)
var $ = function(id) {
    return document.getElementById(id);
};

function deleteRow() {
    var orderNumber = parseInt(prompt ("enter order number to delete")); // converts number into integer
            if (orderNumber == NaN || orderNumber < 1) {
                prompt ("enter order number");
            } else {
            var table = $("myTable");
            var rowCount = table.rows.length; // eliminate header so minus 1
            	for(var i=0, j=0; i<rowCount; i++, j++) { 
            		var row = table.rows[i];
                        if (orderNumber == i) { 
            	        table.deleteRow(i);
                        rowCount--;
                        table.rows[j].cells[0].innerHTML = j; // renumbers the list after delete row
            	        }  
                }
            }
    
}

function edt() {
    // converts number into integer
    var orderNumber = parseInt(prompt ("enter order number to edit")); 
    
    // need to store order number so I can reference when I save edit info
    orderNumberHolder.push(orderNumber); 
        if (orderNumber == NaN || orderNumber < 1) {
           prompt ("enter order number");
        } else {
        var table = $("myTable");
        var rowCount = table.rows.length;
        
        // i is index, so start with 1 so it doesn't include header
        for(var i=1; i<rowCount; i++) {
        var row = table.rows[i]; 
             if (orderNumber == i){
                 $("txtname").value = table.rows[i].cells["1"].innerHTML;
                 $("txtTeaOrder").value = table.rows[i].cells["2"].innerHTML;
                 $("txtTeaSize").value = table.rows[i].cells["3"].innerHTML;

                }
            }
        }
}


function saveChange() {
    var table = $("myTable");
    var rowCount = table.rows.length; // do not want to include header 
            
        for(var i=1; i<rowCount; i++) {
                 var row =...