tla - Add UpDynamic Values

Add up the values into the total box depending on which items were selected, then keep those values when the page is submitted

HTML

<form method="POST" action="web.johnhalsey.co.uk">
    <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>

CSS

.section{
    border: 1px solid grey;
    margin-bottom: 10px;
    padding: 20px;
    background-color: #CCCCCC;
}
.selected{
    background-color: orange;
    
}

JavaScript

$(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));

    });

});