JQuery - Calculation : + ADD - SUBSTRACT

<h2>* All prices are in $USD</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<div name="stillrender" style="width:100%;border-bottom: 1px solid grey;float: left;margin-bottom: 2%;">
<h1>Still Renders</h1>
<div class="quantity" style="float: left;">
<h2>Quantity</h2>
<br>
<input type="text" name="stillquantity" id="stillquantity"/>
</div>
<div class="quality" style="float: left; padding-left: 3%;">
<h2>Unit Price</h2>
<span>$1500</span>
</div>
<div class="stilltottal" style="float: right;">
<h2>Total</h2>
<br>
<input name="stilltottal" id="stilltottal" />
</div>
</div>


<div name="animation" style="width:100%;float: left;border-bottom: 1px solid grey;margin-bottom: 2%;">
<h1>Animation Film/Walkthroughs(HD)</h1>
<div class="aniquantity" style="float: left;">
<h2>Duration(min.)</h2>
<br>
<input type="text" name="pagesani" id="pagesani"/>
</div>
<div class="aniquality" style="float: left; padding-left: 3%;">
<h2>Unit Price</h2>
<span>$10,000/minute</span>
</div>
<div class="anitottal" style="float: right;">
<h2>Total</h2>
<br>
<h2 name="anitottal" id="anitottal"></h2>
</div>
</div>




<div name="floorplan" style="width:100%;float: left;border-bottom: 1px solid grey;margin-bottom: 2%;">
<h1>Floor Plan</h1>
<div class="quantity" style="float: left;">
<h2>Quantity</h2>
<br>
<input type="text" name="pagesfp" id="pagesfp"/>
</div>
<div class="quality" style="float: left; padding-left: 3%;">
<h2>Unit Price</h2>
<span>$300</span>
</div>
<div class="floortottal" style="float: right;">
<h2>Total</h2>
<br>
<h2 name="totalfp" id="totalfp"></h2>
</div>
</div>


<div name="isometric" style="width:100%;border-bottom: 1px solid grey;float: left;margin-bottom: 2%;">
<h1>Isometric</h1>
<div class="quantity" style="float: left;">
<h2>Quantity</h2>
<br>
<input type="text" name="isoquantity" id="isoquantity"/>
</div>
<div class="quality" style="float: left; padding-left: 3%;">
<h2>Unit Price</h2>
<span>$500</span>
</div>
<div class="isotottal" style="float: right;">
<h2>Total</h2>
<br>
<h2 name="isotottal" id="isotottal"></h2>
</div>
</div>



<div name="floorplan" style="width:100%;float: left;border-bottom: 1px solid grey;margin-bottom: 2%;">
<h1>Grand Total</h1>
<div class="floortottal" style="float: right;">
<br>
<h2 name="grandtotal" id="grandtotal"></h2>
</div>
</div>

<script  type="text/javascript">
$(document).ready(function() {
    $('#pagesfp').keyup(function(ev){
var tot1 = $('#pagesfp').val();
        var totalfp = $('#pagesfp').val() * 300;
        $('#totalfp').html((totalfp).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
var tot2 = $('#isoquantity').val();
    $('#isoquantity').keyup(function(ev){
    var iso = $('#isoquantity').val() * 500;
    $('#isotottal').html((iso).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#pagesani').keyup(function(ev){
var tot3 =$('#pagesani').val();
        var animat = $('#pagesani').val() * 10000 ;
        $('#anitottal').html((animat).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#stillquantity').keyup(function(ev){
    var still = $('#stillquantity').val() * 1500;
    $('#stilltottal').val((still).toFixed(2));
    var total = still;
    $('#grandtotal').html((total).toFixed(2));
    });
});
</script>