JSFiddle - React, Tailwind, and code Playground

HTML

<button id="LongB">Long Black</button>
<button id="FlatW">Flat White</button>
<h3>Ordered:</h3>
<div id="ordered"></div>
<h3>Cost:</h3>
<div id="cost"></div>

JavaScript

var orderArray = [];
var orderNumber = 0;
var theOrder = [];
var total = 0;

function orderUpdate(item,price){
    theOrder = [item, price];
    orderArray.push(theOrder);
    // orderNumber++;
}

function makeTable(myArray) {
    var result = "<table border=2 id=orderTable>";
    console.log(myArray.length);
    var arrayLength = myArray.length;
    for(var i = 0; i < myArray.length; i++) {
        result += "<tr id='row" + i + "'>";
        for(var j = 0; j < myArray[i].length; j++){
            result += "<td>" + myArray[i][j] + "</td>";

        }
        result += "<td><button onclick='removeLine(" + i + ")'>Remove</button></td></tr>";
    }
    result += "</table>";
    console.log(myArray);
    return result;
}

$( "#LongB" ).click(function() {
    orderUpdate("Long Black", 2.50);
    $("#ordered").html(makeTable(orderArray));
});

$( "#FlatW" ).click(function() {
    orderUpdate("Flat White", 3.50);
    $("#ordered").html(makeTable(orderArray));
});

function removeLine(arrayIndex){
	orderArray.splice(arrayIndex, 1);	
	$("#ordered").html(makeTable(orderArray));
}