Несколько индикаторов выполнения динамически изменяются с помощью флажков с несколькими значениями

Question

Немного озадачен ... У меня есть 3 флажка и 3 Bootstrap 4 индикатора выполнения.Индикаторы выполнения представляют разные метрики, т.е.progressOne = Мощность, progressTwo = Скорость, progressThree = Размер.Когда каждый из флажков выбран, они увеличивают каждый из этих показателей с 20 путем варьирования значений и являются индивидуальными или накопительными (т. Е. Если выбран флажок checkboxOne, он добавит «5» к значению «Мощность», если я также выберу флажок «Три»), он добавит дополнительные «40».

Пока у меня есть несколько значений, генерируемых в значении флажка с разделением пробелов, т. е.

<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" />

У меня также есть, чтобы, когда этифлажки отмечены, он будет динамически изменять первый индикатор выполнения. HTML для каждого индикатора выглядит следующим образом с изменением идентификатора.

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

У меня проблема с техническим пониманием того, что я не могу нацелиться на 2-йили 3-е значения, удерживаемые в значении флажка. Я пытаюсь разделить 'item.value', чтобы я мог указать значение [2] или [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) + "%";
    }   

Когда я пытаюсьдалее он нацелен только на одно целое число

  //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[2]);
        }else{
           totaltwo-= parseInt(item.value[2]);
        }
        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[3]);
        }else{
           totalthree-= parseInt(item.value[3]);
        }
        var progSuccessThree = document.getElementById('progressThree');
        var totalValThree = totalthree + " ";
            progSuccessThree.setAttribute('aria-valuenow', totalValThree);
            progSuccessThree.style.width = (totalthree + 20) + "%";
    }       

Я поражен, что не могу найти решение для этого онлайн, но ценю любое направление.

JS FЗдесь на холостом ходу