Combining Span Element Values

Combining Span Element Values

You'll discover quickly that I'm a jQuery/Javascript novice who harvests code snippets from the web and tries to get them to solve little problems as I encounter them. I'm working on a little PHP web app that takes a list of disc golfers and randomly assigns them into foursomes (and threesomes when there's a number that's not divisible by 4). Source code is on GitHub. I'm trying to get it to count the number of checkboxes that are checked (that's working OK except when the hyperlink is clicked to check/uncheck all players . . . then the counter is updated only if one of the checkboxes is unchecked or re-checked). I'm also wanting it to count the number of new player text fields that are added (and removed). This part seems to be working fine. What I'm confounded by is how to add the checkbox count and text field count together for a total player count.  Actually, I'm rather confounded by javascript in general and just sort of stumble through. An abbreviated version of the app is shared below. Any assistance is greatly appreciated. We use this for our local league play and it's helpful to get a quick count of players without having to scroll down the listing and count the checkboxes. I'm thinking that a large league/club would really benefit, especially if they were trying to match numbers with some form of sign-in sheet.

Thanks in advance.

<html>
<head>
<title>Combining Span Element Values</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type='text/css'>
body {
    font: 14px sans-serif;
    margin: 10px;
    padding: 10px;
}
</style>
</head>
<body>
Players Playing Today: <span id="count-checked-checkboxes">0</span><br/>
New Players Just For Today: <span id="output">0</span><br/>
Total: <span class="counter" id="total">0</span>
<hr>
<button type="button" id="increment" class="add_field_button">Add Player Field</button>
<button type="button" id="decrement" class="remove_field_button">Remove Player Field</button>
<div class="input_fields_wrap">
</div>
<hr>
<a href="#" class="" id="selectAll" value="selectAll">Select/Deselect All Players</a>
<table border="0" class="w3-table-all" style="table-layout: auto;">
<tr class="w3-red">
<th>SELECT</th>
<th>PLAYER</th>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<input class="w3-check" name="checkbox[]" id="mycheckbox[]" type="checkbox" value="Jimmy Carter" />
</td>
<td align="center">
<input name="user[]" type="hidden" id="user" value="Jimmy Carter">Jimmy Carter</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<input class="w3-check" name="checkbox[]" id="mycheckbox[]" type="checkbox" value="Gerald Ford" />
</td>
<td align="center">
<input name="user[]" type="hidden" id="user" value="Gerald Ford">Gerald Ford</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">
<input class="w3-check" name="checkbox[]" id="mycheckbox[]" type="checkbox" value="Ronald Reagan" />
</td>
<td align="center">
<input name="user[]" type="hidden" id="user" value="Ronald Reagan">Ronald Reagan</td>
</tr>
</table>
</body>
<script>
var max_fields      = 16;
var wrapper         = $(".input_fields_wrap");
var add_button      = $(".add_field_button");
var remove_button   = $(".remove_field_button");

$(add_button).click(function(e){
e.preventDefault();
var total_fields = wrapper[0].childNodes.length;
if(total_fields < max_fields){
$(wrapper).append('<tr><td align="center" bgcolor="#FFFFFF">NEW PLAYER:</td><td align="center"><input type="text" name="user2[]" id="user" class="field-long"></td></tr>');
}
});
$(remove_button).click(function(e){
e.preventDefault();
var total_fields = wrapper[0].childNodes.length;
if(total_fields>1){
wrapper[0].childNodes[total_fields-1].remove();
}
});

</script>

<script>
/* SELECT/DESELECT CHECKBOXES */
$(document).ready(function() {
  $('#selectAll').click(function(e){
    e.preventDefault();
    $("input:checkbox").prop('checked', function(i, current) { return !current; });
  });
});

/* COUNT SELECTED CHECKBOXES */
$(document).ready(function(){
    var $checkboxes = $('input[type="checkbox"]');
    $checkboxes.change(function(){
        var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
        $('#count-checked-checkboxes').text(countCheckedCheckboxes);
    });
});

/* COUNT PLAYER FIELDS ADDED */
$('#increment').click(function() {
    $('#output').text(function(i, val) { 
        return val*1+1 
     });
});

/* SUBTRACT PLAYER FIELDS REMOVED */
$('#decrement').click(function() {
    $('#output').text(function(i, val) {
        if (val <= 0) { return; }
        return val*1-1
     });

/* How can I get the sum of the values sent to the '#count-checked-checkboxes' span  element & '#output' span and display the sum in the #total span? The following  is not doing it for me. */
 
$('#total').text($('#count-checked-checkboxes').text() + $('#output').text());

});
</script>
</html>