AutoComplete Amount

I have this split function, which I can add more fields by clicking a button. My problem is that if I add the field, I can’t get the exact amount and return the amount if I delete the field.

Example script:

The above figure shows an initial quantity of -1,000.50 . Now these are my problems.

• I entered 50in the size of the first field, which results Payee: 1 [-950.50]in as the remaining amount for the recipient. When I add another field, it automatically fills the amount, and I expect -950.50because the remaining amount. But I get the initial amount -1,000.50in the second field. How to get the updated remaining amount?

• If I delete the added field, I want to add the amount back. E.g. if the field has 50, and the remaining amount - -950.50. If I delete the field containing the amount 50, it must be added back to the remaining amount, and it will be -1,000.50. How to add back the amount?

Here is what I tried:

split.html

<table id="dataTable" class="calendar fluid" data-calendar-options='{"maxHeight":70}'"
    <caption> Payee: 1 
        [<span id="remaining">-1,000.50</span>]
    </caption>

    <tbody>
        <tr>
            <td class="week-end" id="p_scents"><br/>
                *Note: Amount totals must equal transaction total and envelopes must be specified to 
                       enable the split button.<br/><br/>

                <p class="button-height">
                    <span class="input">
                        <label class="button orange-gradient">Envelope #1</label>

                        <select name="env[]" class="envelope select compact">
                            <option value="none">(Select)</option>

                            <optgroup label="Category">
                                <option value="1">Internet</option>
                                <option value="2">Savings</option>
                            </optgroup>
                        </select>

                        <input type="text" name="amt[]" placeholder="0.00" size="10" 
                            id="validation-required" class="input-unstyled input-sep validate[required]"
                            onkeyup="calculate(0)">

                        <input type="text" name="note[]" placeholder="note" class="input-unstyled" id="note">
                    </span>

                    <span class="with-tooltip">
                        <img src="{{STATIC_URL}}img/icons/tick.png" title="Default">
                    </span>
                </p><br/>
            </td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>
                <a href="javascript:{}" id="addScnt" class="button orange-gradient icon-plus-round">
                    Another Envelope
                </a>
            </td>
        </tr>
    </tfoot>
</table>


<script>
    function calculate(difference) {
        var sum = 0;
        $(":text").each(function() {
            amt = replaceCommaDollar(this.value);
            if(!isNaN(amt) && amt.length!=0) {
                sum += parseFloat(amt);
                total = sum;
                difference = -1,000.50 + total                                  
            }
        });

        $("#remaining").html(numberWithCommas(difference.toFixed(2)));

        if(difference == 0){
            $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");
        }else{
            $("#split").html("<button type='submit' class='button orange-gradient' disabled='disabled'>Split Amount</button>");
        }
    }

    $(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;
        var remain_amount = Math.abs(replaceCommaDollar($("#remaining").text())).toFixed(2);

        $('#addScnt').live('click', function() {  
            $('<p class="button-height">'+
              ' <span class="input">'+
              '     <label class="button orange-gradient">' + 'Envelope #' + i + '</label>' +
              '     <select name="env[]" class="envelope select compact">'+
              '         <option value="none" selected="selected">(Select)</option>' +
              '         <optgroup label="Category">' +
              '             <option value="1">Internet</option>' +
              '             <option value="2">Savings</option>' +
              '         </optgroup>' +
              '     </select>' +
              '    <input type="text" name="amt[]" id="split-amount' + i + '" placeholder="0.00" size="10" class="input-unstyled input-sep" onkeyup="calculate(0)" value="'+ remain_amount +'">'+
              '    <input type="text" name="note[]" placeholder="note" class="input-unstyled">'+
              ' </span>'+
              ' <a href="javascript:{}" id="remScnt" class="with-tooltip">Remove</a></p><br/\>'
              ).appendTo(scntDiv);

             $("#remaining").html('0.00');
             $("#split").html("<button type='submit' class='button orange-gradient'>Split Amount</button>");

             i++;
             return false;
        });

        $('#remScnt').live('click', function() {
            if( i > 2 ) {
                test = $('#split-amount'+i).val();
                alert(test);

                $(this).parents('p').remove();

                i--;
            }

            return false;
        });
    });
</script>