1 drop down with price + 50.00 shipping and then grand total tried many things cant get it!

1 drop down with price + 50.00 shipping and then grand total tried many things cant get it!

1 drop down with price + 50.00 shipping and then grand total tried many things cant get it!


$("select").change(function() {
    var qty = $(this).val();
    var price = $(this).closest("tr")
                       .find("td[class^=price]")
                       .html().split("$")[1];
    var total = parseInt(qty) * parseFloat(price);
    $(this).closest("tr")
           .find("td[class^=total]")
           .html("$" + total);
    var grandTotal = 0;
    $("td[class^=total]").each(function() {
        grandTotal += parseFloat($(this).html().split("$")[1]);
    });
    $("#grandtotal").html("$" + grandTotal);
});

<table>
<tr>
    <td class="qty">
        <select class="item-1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
    </td>
    <td class="product">
        Book 1
    </td>
    <td class="price-item-1">
        $20
    </td>
    <td class="total-item-1">
        $20
    </td>
</tr>
<tr>
    <td class="qty">
        <select class="item-2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
    </td>
    <td class="product">
        Book 2
    </td>
    <td class="price-item-2">
        $10
    </td>
    <td class="total-item-2">
        $10
    </td>
</tr>
<tr>
    <td colspan="3" align="right">
        <strong>Grand Total:</strong>
    </td>
    <td id="grandtotal">
    </td>
</tr>
</table>

<input type="hidden" id="qty-item-1" value="0"  />
<input type="hidden" id="total-item-1" value="0"  />

<input type="hidden" id="qty-item-2" value="0"  />
<input type="hidden" id="total-item-2" value="0"  />