Updating totals with dynamic data using jquery

by Akram kamal

HTML

<table class="table table-striped table-bordered" id="table1">
    <thead>
        <tr class="table-gradient">
            <th width="10%">
                 <h4>Pass</h4>

            </th>
            <th width="60%">
                 <h4>Description</h4>

            </th>
            <th width="10%">
                 <h4>Price</h4>

            </th>
            <th width="5%">
                 <h4>Quantity</h4>

            </th>
            <th width="15%">
                 <h4>Total</h4>

            </th>
        </tr>
    </thead>
    <tbody>
        <tr class="liftTickets">
            <td>
                 <h5></h5>
 <small>Ages 12 - 99</small>

            </td>
            <td style="vertical-align: middle">
                <div class="form-inline">3 day pass</div>
            </td>
            <td> <span>$200</span><small>/ person</small>

            </td>
            <td>
                <div class="controls inline">
                    <select class="form-control valid" aria-invalid="false">
                        <option value="0" selected="selected">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                </div>
            </td>
            <td class="itemTotal"> <span class="itemTotal price right">400.00</span>

            </td>
        </tr>
        <tr class="liftTickets">
            <td>
                 <h5></h5>
 <small>Ages 12 - 63</small>

            </td>
            <td style="vertical-align: middle">
                <div class="form-inline">1 Day</div>
            </td>
            <td> <span>$99</span><small>/ person</small>

            </td>
            <td>
                <div class="controls inline">
                    <select class="form-control valid" aria-invalid="false">
                        <option value="0" selected="selected">0</option>
                        <option value="1">1</option>
                    ...

JavaScript

$('#table1 tbody tr.liftTickets').change(function () {
    var price = +$(this).find('td:eq(2) span').text().replace('$', ''),
        qty = $(this).find('select').val(),
        previousTotal = +$('#bottomTotal').text().replace('$', '');
    var itemTotal = price * qty;
    $(this).find('td:last span').text((itemTotal).toFixed(2));
    
    
    
    var total = 0
    $(this).closest("tbody").find("span.itemTotal").each(function () {
        total += +$(this).text();
        console.log(this)
    });
    $("#bottomTotal").text("$" + total.toFixed(2))
}).change()