Multi Price Changer

HTML

<div class="wrapper">
    <input type="text" class="qty" size="2" maxlength="2" />
    <input type="hidden" class="price" value="23.4" />
    <input type="hidden" class="total" />
    <input type="checkbox" class="passport" value="18" />
    $<span class="total"></span>
</div>

<div class="wrapper">
    <input type="text" class="qty" size="2" maxlength="2" />
    <input type="hidden" class="price" value="17.3" />
    <input type="hidden" class="total" />
    <input type="checkbox" class="passport" value="5" />
    $<span class="total"></span>
</div>

<div class="wrapper">
    <input type="text" class="qty" size="2" maxlength="2" />
    <input type="hidden" class="price" value="12.5" />
    <input type="hidden" class="total" />
    <input type="checkbox" class="passport" value="10" />
    $<span class="total"></span>
</div>

CSS

.wrapper { border: 1px solid green; padding: 5px; margin: 5px; }

JavaScript

$(".qty, .passport").change(function() {
        //lets get the parent DIV.
        priceBox = $(this).parents('div.wrapper');
        
        var qty = (parseInt(priceBox.find('.qty').val(), 10) || 0);
        var price = parseFloat(priceBox.find('.price').val(), 10);
        var passport = primceBox.find('.passport');
        passport = passport.is(':checked') ? parseInt(passport.val(),10) : 0;
        
        var total = price * qty + passport;
        
		priceBox.find(".total").text(total.toFixed(2));
	});