jQuery looping through elements, sorting by data-id and grabbing values from elements with matching data-id

Question

What I am trying to do is grab the two data-group-score values from the same group-ids and add them together:

https://jsfiddle.net/x0nyr9qn/51/

Updated version I have got with so far:

https://jsfiddle.net/x0nyr9qn/61/

Sample HTML:

<div class="quiz-block-container">
  <div class="quiz-block-question" data-group-id="1" data-group-score="2">
  </div>
  <div class="quiz-block-question" data-group-id="1" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="2" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="2" data-group-score="3">
  </div>

  <div class="quiz-block-question" data-group-id="3" data-group-score="3">
  </div>
  <div class="quiz-block-question" data-group-id="3" data-group-score="1">
  </div>

  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
  <div class="quiz-block-question" data-group-id="4" data-group-score="1">
  </div>
</div>

What I am trying to do is loop through the blocks with class "quiz-block-question" grab the data-group-id, then return the data-group-score for each group by its ID so I can add them together for a total score from those values within that group, and do so for each group-id.

The JS examples I've been playing with and their current states but think I drifted away from something closer to working, but here is what I currently have.

JS (1)

$('.quiz-block-question').each(function() {
  var id = $(this).data('group-id');
  var score = $(this).data('group-score');
    var i = 0;

  $("[data-group-id='" + id + "']").each(function(index) {
    if(++i > 2) {
      return false;
    }
    //$(this).find('.group-id').text(id);
    //console.log("group: " + $(this).data('group-id'));
    //$(this).find('.group-score').text(score);
    //console.log("group score: " + $(this).data('group-score'));
    var first = $(this).data('group-score')[1];
    console.log(first);
    var second = $(this).data('group-score')[2];
    var total = first + second;
    $('.results').append("total:" + total);

  });
  //return false
});

JS (2)

$('.quiz-block-question').each(function(i) {
  var groupID = $(this).data("group-id");
  if ($(this).data('group-id') == i + 1) {
    //console.log(this);
    $("[data-group-id='"+i+"']").each(function() {
      console.log(this);
      var questionGroupID = $(this).data('group-id');
      $(this).each(function() {
        console.log("group score: "+$(this).attr('data-group-score'));
      });
    });
  }
});

Answer 1

Sounds like you just want a .map/reduce operation. This returns an object with key/value pairs of id/total.

 var q = document.querySelectorAll('.quiz-block-question'); var res = Array.from(q, el => ({id: el.dataset.groupId, score: +el.dataset.groupScore}) ).reduce((obj, d) => Object.assign(obj, {[d.id]: (obj[d.id] || 0) + d.score}) , {}); console.log(res); 

 <div class="quiz-block-container"> <div class="quiz-block-question" data-group-id="1" data-group-score="2"> </div> <div class="quiz-block-question" data-group-id="1" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="2" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="2" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="3" data-group-score="3"> </div> <div class="quiz-block-question" data-group-id="3" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="4" data-group-score="1"> </div> <div class="quiz-block-question" data-group-id="4" data-group-score="1"> </div> </div>