Sum By HTML attributes with same ID

Question

How do you sum attributes that share the same Id? What I am asking my not be best practice and am open to suggestions on how to get it to work. I have drag and drop areas and some elements update/transfer with the drag and drop. For example:

<div draggable="true" class="box" id="1" value='g8=1 g9=0'>Random Text 1.1</div>
<div draggable="true" class="box" id="1" value='g8=0 g9=3'>Random Text 1.2</div>
<div draggable="true" class="box" id="1" value='g8=0 g9=0'>Random Text 1.3</div>

From the code above, column 1 g8 sum = 1 and column 1 g9 sum = 3.

I just need it to sum different values per column of data as it is updated via drag and drop. What is the best way to approach this?

Below is a working example trimmed down of what I have so far.

document.addEventListener('DOMContentLoaded', (event) => {

  var dragSrcEl = null;

  function handleDragStart(e) {
    this.style.opacity = '0.4';

    dragSrcEl = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragOver(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }

    e.dataTransfer.dropEffect = 'move';

    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');

  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  function handleDrop(e) {
    if (e.stopPropagation) {
      e.stopPropagation(); // stops the browser from redirecting.
    }

    if (dragSrcEl != this && this.className != "fc-event over") {
      console.log(this);
      var oValue = $(this).attr('value');
      var value = $(dragSrcEl).attr('value');
      console.log(oValue);
      console.log(value);
      if (dragSrcEl.className !== "fc-event") {
        dragSrcEl.innerHTML = this.innerHTML;
        $(dragSrcEl).attr("value", oValue);
        this.innerHTML = e.dataTransfer.getData('text/html');
        $(this).attr("value", value);
      } else {
        this.innerHTML = e.dataTransfer.getData('text/html');
        $(this).attr("value", value);
      }

    }

    return false;

  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function(item) {
      item.classList.remove('over');
    });
  }


  let items = document.querySelectorAll('.grid-container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart, false);
    item.addEventListener('dragenter', handleDragEnter, false);
    item.addEventListener('dragover', handleDragOver, false);
    item.addEventListener('dragleave', handleDragLeave, false);
    item.addEventListener('drop', handleDrop, false);
    item.addEventListener('dragend', handleDragEnd, false);
  });



  let items2 = document.querySelectorAll('#external-events-listing div');
  items2.forEach(function(item2) {
    item2.addEventListener('dragstart', handleDragStart, false);
    item2.addEventListener('dragenter', handleDragEnter, false);
    item2.addEventListener('dragover', handleDragOver, false);
    item2.addEventListener('dragleave', handleDragLeave, false);
    item2.addEventListener('drop', handleDrop, false);
    item2.addEventListener('dragend', handleDragEnd, false);
  });

});

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#wrap {
  width: 1100px;
  margin: 0 auto;
}

#external-events {
  float: left;
  width: 150px;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #eee;
  text-align: left;
}

#external-events h4 {
  font-size: 16px;
  margin-top: 0;
  padding-top: 1em;
}

#external-events-listing {
  width: 140px;
  height: 175px;
  overflow: auto;
}

#external-events .fc-event {
  margin: 10px 0;
  cursor: pointer;
}

#external-events p {
  margin: 1.5em 0;
  font-size: 11px;
  color: #666;
}

#external-events p input {
  margin: 0;
  vertical-align: middle;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.box {
  border: 2px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

.box.over {
  border: 3px dotted #666;
}

[draggable] {
  user-select: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4>Rearranging Section</h4>
<div class="grid-container">
  <div draggable="false" class="box1" id="1">Desired Result: Sum g8 Col1</div>
  <div draggable="false" class="box2" id="2">Desired Result: Sum g8 Col2</div>
  <div draggable="false" class="box3" id="3">Desired Result: sum g8 Col3</div>
  <div draggable="false" class="box1" id="1">Desired Result: Sum g9 Col1</div>
  <div draggable="false" class="box2" id="2">Desired Result: Sum g9 Col2</div>
  <div draggable="false" class="box3" id="3">Desired Result: sum g9 Col3</div>
  <div draggable="true" class="box" id="1" value='g8=1 g9=0'>Random Text 1.1</div>
  <div draggable="true" class="box" id="2" value='g8=3 g9=1'>Random Text 2.1</div>
  <div draggable="true" class="box" id="3" value='g8=2 g9=5'>Random Text 3.1</div>
  <div draggable="true" class="box" id="1" value='g8=0 g9=3'>Random Text 1.2</div>
  <div draggable="true" class="box" id="2" value='g8=1 g9=0'>Random Text 2.2</div>
  <div draggable="true" class="box" id="3" value='g8=2 g9=0'>Random Text 3.2</div>
  <div draggable="true" class="box" id="1" value='g8=0 g9=0'>Random Text 1.3</div>
  <div draggable="true" class="box" id="2" value='g8=2 g9=2'>Random Text 2.3</div>
  <div draggable="true" class="box" id="3" value='g8=3 g9=4'>Random Text 3.3</div>

</div>