このJavascriptコードで間違った出力が表示されたのはなぜですか？

HTML入力テキストが3つあり、有料入力テキストを入力しようとすると、100から999までしか正解が得られませんでしたが、支払い総額が1000以上に達すると、間違った出力が返されました。

例：

支払額： 500（1000を超えると出力が間違っます）

支払い済み：600 <-600を入力すると、0から999の支払い額である限り、正しい出力が変更されます。

変更： 100 <-正解。

..しかし、支払額が999を超えると、出力が間違ってしまいます。

例：

支払額： 1100

有料： 1200

変更： 1199 <-出力が間違っていました。支払額が1000を超えているためです。

これは私のスクリプトです：

$("#payable_form input").each(function(){
    $(this).keyup(function(){
       var payable_amount;
       var paid;

       payable_amount = parseFloat( $('#payable_amount').val() );
       paid = parseFloat( $('#paid').val() );
       payable_amount = $.isNumeric( payable_amount ) ? payable_amount : 0;
       paid = $.isNumeric(paid) ? paid : 0;

       var change = paid - payable_amount;
       $('#change').val(change.toFixed(2));
   });
});

完全なコード：

<form class="form-horizontal" action="salestranslog.php" id="payable_form" method ="POST">
  <br />
    <div class="form-group">
      <label class="control-label col-xs-4">Customers:</label>
            <div class="col-xs-6">
        <?php  
             $result = mysqli_query($connection, "SELECT * FROM customers"); 
             echo "<select class='form-control' name='customer'>"; 
             while($row = mysqli_fetch_assoc($result)) 
             { 
                echo "<option value = '".$row[name]."'>".$row[name]."</option>"; 
             }
             echo "</select>"; 
        ?>
            </div>  
    </div>
    <div class="form-group form-group has-error has-feedback">
        <label class="control-label col-xs-4" for="amount">Total Payable Amount:</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" id="payable_amount" name="payable_amount" value="<?php echo  number_format($total_sales,2); ?>"readonly>
            <span class="glyphicon glyphicon-info-sign form-control-feedback"></span>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-4" for="ttl_items">Total Purchase Items:</label>
        <label class="control-label col-xs-1" for="total_items"><mark><?php echo $count; ?></mark></label>
    </div>
        <div class="form-group">
      <label class="control-label col-xs-4">Paid by:</label>
            <div class="col-xs-6">
                <select class="form-control" name="cash">
                    <option>Cash</option>
                    <option>Cheque</option>
                </select>
            </div>  
    </div>

    <div class="form-group form-group-lg">
        <label class="control-label col-xs-4" for="paid">Paid:</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="paid" id="paid" placeholder="0.00">
        </div>
    </div>
    <br /><br /><br />
    <div class="form-group has-warning has-feedback">
        <label class="control-label col-xs-4" for="ttl_items">Return Change:</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" id="change" name="change" placeholder="0.00" readonly>
             <span class="glyphicon glyphicon-send form-control-feedback"></span>

        </div>
    </div>
    <br />
     </div>                     
    <script>
        $("#payable_form input").each(function(){
            $(this).keyup(function(){
            var payable_amount;
            var paid;
            payable_amount = parseFloat($('#payable_amount').val());
            paid = parseFloat($('#paid').val());
            payable_amount = $.isNumeric(payable_amount)?payable_amount:0;
            paid = $.isNumeric(paid)?paid:0;
            var change = paid - payable_amount;
            $('#change').val(change.toFixed(2));

        });
      });
    </script>

    <div class="modal-footer">
        <input type="submit" name="submit" value = "Submit" class="btn btn-success">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
</form>