Multiple Progress Bars Dynamically Change with Checkboxes with Multiple Values

A bit stumped... I have 3 checkboxes and 3 Bootstrap 4 progress bars. The progress bars represent different metrics, ie. progressOne = Power, progressTwo = Speed, progressThree = Size. When each of the checkboxes are selected, they increase each of these metrics from 20 by varying values and are individual or accumulative (ie, checkboxOne is selected, it will add '5' onto the 'Power' value, if I select checkboxThree as well, it will add an additional '40'.

So far I have multiple values being generated in the checkbox value with spaces separating ie

<input type="checkbox" id="checkboxOne" value="5 15 35" />
<input type="checkbox" id="checkboxTwo" value="0 25 0" />
<input type="checkbox" id="checkboxThree" value="40 0 20" />

I also have it so that, when these checkboxes are checked, it will dynamically change the first progress bar. The HTML for each bar is as follows with the ID changing.

<div class="progress">
  <div id="progressOne" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
</div>

The problem I have is from a technical understanding that I cannot target the 2nd or 3rd values being held in the checkbox value. What I am trying to do is split the 'item.value' so I can target value [2] or [3].

   //Bar 1
    var total = 0;
    function comProd(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        var progSuccess = document.getElementById('progressOne');
        var totalVal = total + " ";
            progSuccess.setAttribute('aria-valuenow', totalVal);
            progSuccess.style.width = (total + 20) + "%";
    }   

When I try the following, it only targets a single integer

  //Bar 1
    var total = 0;
    function comProd(item){
        if(item.checked){
           total+= parseInt(item.value);
        }else{
           total-= parseInt(item.value);
        }
        var progSuccess = document.getElementById('progressOne');
        var totalVal = total + " ";
            progSuccess.setAttribute('aria-valuenow', totalVal);
            progSuccess.style.width = (total + 20) + "%";
    }   
    //Bar 2
    var totaltwo = 0;
    function comProdtwo(item){
        if(item.checked){
           totaltwo+= parseInt(item.value);
        }else{
           totaltwo-= parseInt(item.value);
        }
        var progSuccessTwo = document.getElementById('progressTwo');
        var totalValTwo = totaltwo + " ";
            progSuccessTwo.setAttribute('aria-valuenow', totalValTwo);
            progSuccessTwo.style.width = (totaltwo + 20) + "%";
    }       
    //Bar 3
    var totalthree = 0;
    function comProdthree(item){
        if(item.checked){
           totalthree+= parseInt(item.value);
        }else{
           totalthree-= parseInt(item.value);
        }
        var progSuccessThree = document.getElementById('progressThree');
        var totalValThree = totalthree + " ";
            progSuccessThree.setAttribute('aria-valuenow', totalValThree);
            progSuccessThree.style.width = (totalthree + 20) + "%";
    }       

I'm amazed I can't find a solution to this online but appreciate any direction.