JQuery абс значений 2 набора функций при проверке

Question

Working jsfiddle

еще новичок в JQuery/Javacript, но у меня есть 2 функции, которые суммируют скрытые значения, когда проверяются, и мне нужно, чтобы создать абсолютное значение их разности:

$(document).ready(function() { 

    function sumRows() { 
    var sum = 0, 
     total = $('#total'); 
    $('#myteam tr').each(function() { 
     var amount = $(this).find('input[name="amount"]'), 
     checkbox = $(this).find('input[name="include"]'); 
     if (checkbox.is(':checked') && amount.val().length > 0) { 
     sum += parseInt(amount.val(), 10); 
     } 
    }); 
    total.text(sum); 
    } 

    function sumRows2() { 
    var sum2 = 0, 
     total2 = $('#total2'); 
    $('#otherteam tr').each(function() { 
     var amount2 = $(this).find('input[name="amount2"]'), 
     checkbox2 = $(this).find('input[name="include2"]'); 
     if (checkbox2.is(':checked') && amount2.val().length > 0) { 
     sum2 += parseInt(amount2.val(), 10); 
     } 
    }); 
    total2.text(sum2); 
    } 

    $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows); 
    $('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2); 

});` 

Это простой HTML, чтобы показать вам, что я ищу, чтобы сделать, я хочу, чтобы показать разницу каждую команду ящик проверяется:

<table> 
    <tr> 
    <td colspan="2">Difference: 
     <span id="diff">0</span> 
    </td> 
    </tr> 
    <tr> 
    <td>My Team: 
     <span id="total">0</span> 
    </td> 
    <td>Other Team: 
     <span id="total2">0</span> 
    </td> 
    </tr> 
    <tr> 
    <td> 
     <table id="myteam"> 
     <tr> 
      <td> 
      <input type="hidden" value="100" name="amount"> 
      </td> 
      <td> 
      <input type="checkbox" name="include"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <input type="hidden" value="200" name="amount"> 
      </td> 
      <td> 
      <input type="checkbox" name="include"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <input type="hidden" value="300" name="amount"> 
      </td> 
      <td> 
      <input type="checkbox" name="include"> 
      </td> 
     </tr> 
     </table> 
    </td> 
    <td> 
     <table id="otherteam"> 
     <tr> 
      <td> 
      <input type="hidden" value="100" name="amount2"> 
      </td> 
      <td> 
      <input type="checkbox" name="include2"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <input type="hidden" value="200" name="amount2"> 
      </td> 
      <td> 
      <input type="checkbox" name="include2"> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <input type="hidden" value="300" name="amount2"> 
      </td> 
      <td> 
      <input type="checkbox" name="include2"> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

Answer 1

$(document).ready(function() { 

    function sumRows() { 
    var sum = 0, 
     total = $('#total'); 
    $('#myteam tr').each(function() { 
     var amount = $(this).find('input[name="amount"]'), 
     checkbox = $(this).find('input[name="include"]'); 
     if (checkbox.is(':checked') && amount.val().length > 0) { 
     sum += parseInt(amount.val(), 10); 
     } 
    }); 
    total.text(sum);  
    $("#diff").text(Math.abs(sum - parseInt(total2.innerText))); 
    } 

    function sumRows2() { 
    var sum2 = 0, 
     total2 = $('#total2'); 
    $('#otherteam tr').each(function() { 
     var amount2 = $(this).find('input[name="amount2"]'), 
     checkbox2 = $(this).find('input[name="include2"]'); 
     if (checkbox2.is(':checked') && amount2.val().length > 0) { 
     sum2 += parseInt(amount2.val(), 10); 
     } 
    }); 
    total2.text(sum2); 
    $("#diff").text(Math.abs(parseInt(total.innerText)- sum2)); 
    } 

    // calculate sum anytime checkbox is checked or amount is changed 
    $('input[name="amount"], input[name="include"]').on('change keyup blur', sumRows); 
    $('input[name="amount2"], input[name="include2"]').on('change keyup blur', sumRows2); 

});