Subtracting Cost from Balance

Question

User-333609119 posted

I have been working on a daily fantasy sports site and am stumped on how to decrease the value of starting balance when a user selects an athlete.

Below is my ContestEntry.cshtml view:

    <div class="row">
        <div class="col-md-8">
            <div class="card border-primary">
                <div class="card-header">
                    <h6>Available Drivers</h6>
                </div>
                <div class="card-body" style="height:300px;overflow:auto">
                    <table class="table table-striped" id="chooseLeft">
                        <tbody>
                            @foreach (var driver in Model.Drivers)
                            {
                                <tr>
                                    <td>@driver.Name</td>
                                    <td>
                                        <span id="cost">@string.Format("{0:c}", driver.Cost)</span>
                                    </td>
                                    <td>
                                        <input id="insert" type="button" class="btn btn-primary btn-sm" value="+" onclick="insert(this)" />
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card border-primary">
                <div class="card-header">
                    <h6 class="float-left">Current Lineup</h6>
                    <h6 class="float-right">
                        <span id="balance">@string.Format("{0:c}", Model.Balance)</span>
                    </h6>
                </div>
                <div class="card-body" style="height:300px;">
                    <table class="table table-striped" id="chooseRight">
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

Below is my script:

<script>
    function insert(o) {
        var p = $(o).closest('tr');
        copyTable = $('#chooseRight tbody');
        cloneRow = p.clone();
        copyTable.append(cloneRow);
        p.remove();

        var balance = document.getElementById("balance").innerHTML;
        var cost = document.getElementById("cost").innerHTML;
        var total = parseFloat(balance) - parseFloat(cost);
        if (!isNan(total))
            document.getElementById("balance").innerHTML = total;
    }
</script>

When I add athlete to right table, the balance doesn't reflect the new amount minus the cost of the athlete.

Here is a link to an image of the tables, starting balance is $10,000. When the 'Andy Bozell' is added, the new balance should show $9,000.

https://imgur.com/a/lLCdfSw

Any help would be greatly appreciated, thank you!