JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <table contenteditable>
        <thead>
            <tr>
                <th>Service</th>
                <th>Cost</th>
                <th>Complementary (Optional) Service</th>
                <th>Cost</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A Service</td>
                <td class="cost">10</td>
                <td>An Optional Service</td>
                <td class="compcost">5</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Total</th>
                <th class="totalcost"></th>
            </tr>
        </tfoot>
    </table>
    <button id="add">Add</button>
    <button id="remove">Remove</button>
    <button id="reset">Reset</button><br />
    <button id="inccomp">Include Comps</button>
    <button id="exccomp">Exclude Comps</button><br />
    <button id="calc">Calculate Total</button>
</div>

CSS

td { border: solid 1px black;}

JavaScript

var i = $('tbody>tr').size() + 1;

            $('#add').click(function() {
                var rowTemplate = '<tr><td>New Service</td><td class="cost">10</td></tr>';
                if ($("tbody tr:first-child td").length > 2) {
                    rowTemplate = '<tr><td>New service</td><td class="cost">10</td><td>New Optional</td><td class="compcost">5</td></tr>';
                }
                $(rowTemplate).fadeIn('slow').appendTo('tbody');
                i++;
            });

            $('#remove').click(function() {
                if(i > 1) {
                    $('tbody>tr:last').remove();
                    i--;
                }
            });

            $('#reset').click(function() {
                while(i > 2) {
                    $('tbody>tr:last').remove();
                    i--;
                }
            });

            $('#exccomp').click(function(){
                $('table').find('.compcost').removeClass('included');
            });

            $('#inccomp').click(function(){
                $('table').find('.compcost').addClass('included');
            });

        $('#calc').click(function(){ 
            var sumArray = [];
                $('table tbody tr').each(function() {
                    var $this = $(this), 
                        includedCompCost = $this.find('.compcost').filter('.included').text().match(/\d+/);
                    sumArray.push($this.find('.cost').text().match(/\d+/)); 
                    if (includedCompCost !== "") { sumArray.push(includedCompCost); }
                });
                var total = 0;
                for (var i = 0; i < sumArray.length; i++) {
                    for (var i = 0; i < sumArray.length; i++) { 
                        var parsedInt = parseInt(sumArray[i]); 
                        if (!isNaN(parsedInt) && parsedInt > 0) { 
                            total += parsedInt; 
                        } 
                    }
                }
               ...