document.querySelectorAll select id of specific input

I have a table which has two separate checkbox inputs. When selecting the first input there is a cumulative amount which calculates. If you select the second checkbox, the function errors (because of the duplicate input).

Function

function updateTotals() {
    var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
    $('#checkedTotal').val(sum);
};

What I need to do is separate the inputs, maybe using a class. I cant seem to get the syntax, or may be barking up the wrong tree. Something like...

function updateTotals() {
    var sum = Array.prototype.reduce.call(document.querySelectorAll ('.input').check:checked,(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
    $('#checkedTotal').val(sum);
};

I would add this as an jsfiddle example, but the table is in a Salesforce Visualforce Page, using apex fields.

Thanks in advance

UPDATE

Added HTML

<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">


    <input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">

    <table id="invoicesTable" style="width:100%;">
        <thead class="tableHeadBlue">
            <tr>
                <td>Select</td>
                <td>Date</td>
                <td>Type</td>
                <td>Order</td>
                <td>Amount</td>
                <td>id</td>
                <td>Select2</td>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
                        </label>
                    </td>
                    <td>
                        <span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
                        </span>
                    </td>
                    <td><span style="color:red;">Credit</span>
                    </td>
                    <td>
                        <span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check" style="font-size:26px;"></td>
                </tr>
        </tbody>
    </table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>

Solution

Add class first to first checkbox in <tr> and add class second to second checkbox in <tr>.

updateTotals only query checkbox which has class first to avoid second.

function updateTotals() {
    var sum = Array.prototype.reduce.call(document.querySelectorAll("input.check.first:checked"),(a,v) => a + parseFloat(v.dataset.totalAmount), 0);
    $('#checkedTotal').val(sum);
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<form id="j_id0:j_id2" name="j_id0:j_id2" method="post">
<input type="hidden" name="j_id0:j_id2" value="j_id0:j_id2">


    <input disabled="disabled" id="checkedTotal" name="amount" placeholder="Selected Amount" step=".02" type="number">

    <table id="invoicesTable" style="width:100%;">
        <thead class="tableHeadBlue">
            <tr>
                <td>Select</td>
                <td>Date</td>
                <td>Type</td>
                <td>Order</td>
                <td>Amount</td>
                <td>id</td>
                <td>Select2</td>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:0:inputId" type="checkbox" name="j_id0:j_id2:j_id4:0:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="458.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id7">19/04/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span  id="j_id0:j_id2:j_id4:0:j_id14">00006648</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id16">$458.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:0:j_id18">8015D000000CsiH</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:0:j_id20" class="check second" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:1:inputId" type="checkbox" name="j_id0:j_id2:j_id4:1:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="200.00">
                        </label>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id7">21/06/2018</span>
                        <span style="color:red;">
                        </span>
                    </td>
                    <td>Invoice
                    </td>
                    <td>
                        <span style="color:Black"><span id="j_id0:j_id2:j_id4:1:j_id14">00006849</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id16">$200.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:1:j_id18">8015D000000DEuB</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:1:j_id20" class="check second" style="font-size:26px;"></td>
                </tr>
                <tr>
                    <td>
                        <label class="formCheck"><input id="j_id0:j_id2:j_id4:2:inputId" type="checkbox" name="j_id0:j_id2:j_id4:2:inputId" class="check first" onchange="updateTotals();" style="font-size:26px;" data-total-amount="500.00">
                        </label>
                    </td>
                    <td>
                        <span style="color:red;"><span id="j_id0:j_id2:j_id4:2:j_id9">22/06/2018</span>
                        </span>
                    </td>
                    <td><span style="color:red;">Credit</span>
                    </td>
                    <td>
                        <span style="color:red"><span id="j_id0:j_id2:j_id4:2:j_id14">00006852</span>
                        </span>
                    </td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id16">$500.00</span></td>
                    <td><span id="j_id0:j_id2:j_id4:2:j_id18">8015D000000DHKW</span></td>
                    <td><input type="checkbox" name="j_id0:j_id2:j_id4:2:j_id20" class="check second" style="font-size:26px;"></td>
                </tr>
        </tbody>
    </table><div id="j_id0:j_id2:j_id24"></div>
</form>
</div>