Orderitems variables store only last record from list although I have more record

saleslino  quantity
1             2
2             6
3             9

public class SalesHeader
    {
        public int SalesOrderNo { get; set; }
        public int SalesYear { get; set; }
        public int BranchCode { get; set; }
        public int SalesType { get; set; }
        public DateTime SalesDate { get; set; }
        public int CustomerID { get; set; }
        public Customer Customers { get; set; }
        public ICollection<SalesFooter> SalesFooters { get; set; }
        public decimal TotalPrice { get; set; }
    }

<script>
    $(document).ready(function () {
        var orderItems = [];
        //Add button click function
        $('#add').click(function () {
            //Check validation of order item
            var isValidItem = true;
            
            //Add item to list if valid
            if (isValidItem) {
                orderItems.push({
                    SalesLineNo: $('#SalesLineNo').val().trim(),
                    ItemCode: $('#ItemCode').val().trim(),
                    Quantity: parseInt($('#Qunatity').val().trim()),
                    UnitPrice: parseFloat($('#UnitPrice').val().trim()),
                    Total: parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim())
                });
            }
            //populate order items
            GeneratedItemsTable();

        });
        function GeneratedItemsTable() {
            if (orderItems.length > 0) {
                var $table = $('<table/>');
                $table.append('<thead><tr><th>SalesLineNo</th><th>ItemCode</th><th>Qunatity</th><th>UnitPrice</th><th>Total</th><th></th></tr></thead>');
                var $tbody = $('<tbody/>');
                $.each(orderItems, function (i, val) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(val.SalesLineNo));
                    $row.append($('<td/>').html(val.ItemCode));
                    $row.append($('<td/>').html(val.Qunatity));
                    $row.append($('<td/>').html(val.UnitPrice));
                    $row.append($('<td/>').html(val.Total));
                    var $remove = $('<a href="#">Remove</a>');
                    $remove.click(function (e) {
                        e.preventDefault();
                        orderItems.splice(i, 1);
                        GeneratedItemsTable();
                    });
                    $row.append($('<td/>').html($remove));
                    $tbody.append($row);
                });
                console.log("current", orderItems);
                $table.append($tbody);
                $('#orderItems').html($table);
            }
            else {
                $('#orderItems').html('');
            }
        }
        $("#saveOrder").click(function (e) {
            e.preventDefault();

            //================Save Footer====
            var orderItems = new Array();

            var orderItem = {};
            orderItem.SalesLineNo = $('#SalesLineNo').val().trim();
            orderItem.ItemCode = $('#ItemCode').val().trim();
            orderItem.Quantity = parseInt($('#Qunatity').val().trim());
            orderItem.Price = parseFloat($('#UnitPrice').val().trim());
            orderItem.Total = parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim());
            orderItems.push(orderItem);
            //===========Save Header=======
            var saleheader = {};
            saleheader.SalesOrderNo = $("#SalesOrderNo").val();
            saleheader.SalesYear = $("#SalesYear").val();
            saleheader.BranchCode = $("#BranchCode").val();
            saleheader.SalesType = $("#SalesType").val();
            saleheader.SalesDate = $("#SalesDate").val();
            saleheader.TotalPrice = $("#TotalPrice").val();
            saleheader.CustomerID = $("#CustomerID").val();
            saleheader.SalesFooters = orderItems;
            //===========

            console.log('Submit data: ');
            console.log(JSON.stringify(saleheader));
            $.ajax({
                traditional: true,
                //contentType: 'application/json; charset=utf-8',
                contentType: 'application/json',
                dataType: 'json',
                type: 'POST',
                url: '/SalesOrder/Create',
                data: JSON.stringify(saleheader),
                success: function (result) {
                    console.log('Data received: ');
                    alert(result);
                    location.reload();
                },
                error: function () {
                    alert("Error!")
                }
            });
        });
    });
   
</script>