JSFiddle - React, Tailwind, and code Playground

HTML

<div class="checkbox-wrapper">
	    <label>
	    	<input type="checkbox" data-stats="isActive" /> Active
	    </label>
	    <label>
            <input type="checkbox" data-stats="isnotActive" /> Inactive
	    </label>
	</div>

    <ul class="list">  
        <li id="isActive" value="10">Item One : 10</li>
        <li id="isActive" value="20">Item Two : 20</li>
        <li id="isActive" value="30">Item three : 30</li>
        <li id="isnotActive" value="40">Item Four : 40</li>
        <li id="isnotActive" value="50">Item Five : 50</li>
    </ul>
    <p>Total : <span id="total"></span></p>

JavaScript

$('.checkbox-wrapper').delegate('input:checkbox', 'change', function(){
    //Use this is if you want to uncheck other checkbox if another checkbox is checked 
    //$('input').not(this).prop('checked', false); 
    var $lis = $('.list > li').hide();
    $('input:checked').each(function()
                            {   
                                $lis.filter('#' + $(this).attr('data-stats')).show();
                            });
    
    console.log($lis.filter('#' + $(this).attr('data-stats')));
    
    var myVals = [];
    $lis.filter('#' + $(this).attr('data-stats')).map(function(){
        myVals.push($(this).attr('value'));
    });
    var arr = myVals,
        total = 0;
    $.each(arr,function(i) {
        total += arr[i];
        
    });
    $("#total").text(total);
    console.log(total)
}).find('input:checkbox').change();