Как пересчитать сумму значений столбца после удаления строки из таблицы

Question

Я пытаюсь пересчитать сумму значений 3-го столбца таблицы. Здесь я добавляю строки на кнопку Добавить. Строки добавляются с помощью кнопки удаления в таблице. Я хочу пересчитать значения 3-го столбца после нажатия кнопки «Удалить», которая удаляет строку. Но здесь итоговое значение не изменяется после удаления строки

В stackOverflow я нашел решения, но ответ не отвечал моим требованиям

   //To recalculate after deleting
        function reCalculate() {
            var total = 0;
            var value=0;
            $("#Quantity").each(function () {
                debugger;
                value = $(this).text();
                // add only if the value is number
                if (!isNaN(value) && value.length != 0) {
                    total += parseInt(value);
                }
            });
            alert(total);
        }

          //To remove the row from the table
        function RemoveRow(button) {
                var row = $(button).closest("TR");
                var table = $("#table")[0];
                table.deleteRow(row[0].rowIndex);
                reCalculate();

            }

Ожидаемый результат - правильно пересчитать все значения в столбце, ноэто дает общую сумму 0

  <div class="container-fluid" id="orderContainer">
        <div class="table-responsive">
            <table class="table table-bordered" id="table">
                <tr>
                    <th>Product</th>
                    <th class="hidden"></th>
                    <th>Price</th>
                    <th>Quantity</th>
                    <th>Extended Amount</th>
                    <th></th>
                </tr>
                <tr id="enterOrder">
                    <td>
                        @Html.DropDownListFor(model => model.ProductId, Model.ProductsList, "Select Item", new { @class = "form-control", id = "ProductList", required = "required" })
                        <span class="error" id="errorForDropDown" style="color:red; display:none">This field is required</span>
                    </td>
                    <td class="hidden" id="ProductIdd"></td>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input id="UnitPrice" style="width:80px;" name="UnitPrice" class="form-control" readonly="readonly" />
                        </div>
                    </td>
                    <td><input id="Quantity" style="width:80px;" name="Quantity" type="number" class="form-control" oninput="CalculateExtendedAmount()" /></td>
                    <td>
                        <div class="input-group">
                            <span class="input-group-addon">$</span>
                            <input id="ExtendedAmount" style="width:80px;" name="ExtendedAmount" class="form-control" readonly="readonly" />
                        </div>
                    </td>
                    <td><input type="button" value="Add" id="addOrderRow" class="btn btn-primary" onclick="AddRow()" /></td>
                </tr>
            </table>
        </div>
        <div class="pull-right">
            <h3>Total</h3>
            <table class="table table-bordered" style="width:300px; border-width:medium; border-color:darkcyan">
                <tr>
                    <td>Total Items/Quantities</td>
                    <td><span id="TotalQuantity"></span></td>
                </tr>
                <tr>
                    <td>Order Total</td>
                    <td>$ <span id="TotalOrder"></span></td>
                </tr>
            </table>

            <button id="submitOrder" type="submit" class="btn btn-default" onclick="SubmitOrder()" disabled="disabled">Submit Order</button>
        </div>
    </div>
</div>

Вот HTML. Есть 2 таблицы. Один показывает добавление строк на кнопку Добавить, а другой просто показать общее количество и расширенное количество