Dynamic float in form changes to NaN when form submitted

I have a form where a user can select services they want with different fees involved. When they select a service I am adding up the total payable at the bottom using jQuery which all works fine, and its only there to show the user how much they have to pay.

However in the second between them hitting the submit button, and the payment gateway loading, the dynamic value on screen changes to NaN.

It just doesn't look very professional.

Here is a snippet of the code.

HTML

<form method="POST" action="">
    <div id="one" class="section btn-primary">
        <table>
            <tr>
                <td>Price</td>
                <td><span class="service-price">5.99</span></td>
            </tr>
            <tr>
                <td>VAT</td>
                <td><span class="service-vat">1.20</span></td>
            </tr>
            <tr>
                <td>Total</td>
                <td><span class="service-total">7.19</span></td>
            </tr>
        </table>
    </div>
    <div id="two" class="section btn-primary">
        <table>
            <tr>
                <td>Price</td>
                <td><span class="service-price">5.99</span></td>
            </tr>
            <tr>
                <td>VAT</td>
                <td><span class="service-vat">1.20</span></td>
            </tr>
            <tr>
                <td>Total</td>
                <td><span class="service-total">7.19</span></td>
            </tr>
        </table>
    </div>
    <div class="">
        <div class=" action">
            <table id="total-price">
                <tr>
                    <td>Price</td>
                    <td id="ex-vat">0</td>
                </tr>
                <tr>
                    <td>VAT</td>
                    <td id="vat">0</td>
                </tr>
                <hr/>
                <tr>
                    <td>
                         <h3>Total</h3>
                    </td>
                    <td>
                         <h3 id="payment-total">0</h3>
                    </td>
                </tr>
            </table>
        </div>
        <div class="">
            <input type="submit" value="Make Payment">
        </div>
    </div>
</form>

jQuery

$(document).ready(function () {

    $('.btn-primary').click(function () {

        $(this).toggleClass('selected');

        var service_price = parseFloat($(this).find('span.service-price').text());
        var service_vat = parseFloat($(this).find('span.service-vat').text());
        var service_total = parseFloat($(this).find('span.service-total').text());

        var paymentService = parseFloat($('#ex-vat').text());
        var paymentVat = parseFloat($('#vat').text());
        var paymentTotal = parseFloat($('#payment-total').text());

        if ($(this).hasClass('selected')) {

            paymentService = (paymentService + service_price);
            paymentVat = (paymentVat + service_vat);
            paymentTotal = (paymentTotal + service_total);

        } else {
            paymentService = (paymentService - service_price);
            paymentVat = (paymentVat - service_vat);
            paymentTotal = (paymentTotal - service_total);
        }

        $('#ex-vat').text(parseFloat(paymentService).toFixed(2));
        $('#vat').text(parseFloat(paymentVat).toFixed(2));
        $('#payment-total').text(parseFloat(paymentTotal).toFixed(2));

    });

});

And a working JS FIDDLE so you can see it in action. If you click the the grey boxes you can it working. But that total changes to NaN on submit on the live site.

Any ideas?

I fixed this.

it turns out I had the same class (btn-primary) on the submit button which was throwing it all out. Once I changed the class on the actual select buttons so it didn't clash with the submit, it worked.