Javascript function to add to or splice array

I have two buttons, each button adds an array to the array orderArray. This works fine and the array is displayed as a html table. When the table is output a button is also created. This buttons purpose is to remove the array associated with it, and hence remove a line from the table.

This works fine, but after removing part of the array with .splice it is not possible to then add more to the array, it just throws "cannot read property length".

You can see in the console that the array is spliced and that the length value is correct but the error still persists. I am clearly not getting something here, as I thought that as the loop calls myArray.length it would get the right length every time.

Here is the js:

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

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

function makeTable(myArray) {
    var result = "<table border=2 id=orderTable>";
    console.log(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);
    console.log(orderArray);
    $("#ordered").html(makeTable(orderArray));
}

and the html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSPOS</title>
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>

</head>
<body>

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

<script src="js/stuff.js"></script>
</body>
</html>

and here it is as a fiddle.

Solution

Try substituting orderArray.push(theOrder); for orderArray[orderNumber] = theOrder;

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

jsfiddle https://jsfiddle.net/purnrntr/2/