JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="inventory one-of-two">
  <ul>
    <li data-item-id="0" data-item-name="Potato" data-item-amount="1" data-item-rarity="Rare-ish" class="gw2-item">Potato: 1</li>
    <li data-item-id="1234" data-item-name="Radish" data-item-amount="4" data-item-rarity="Rad-ish" class="gw2-item">Radish: 4</li>
  </ul>
</div>

<div class="inventory one-of-two">
  <ul>
    <li data-item-id="374" data-item-name="Banana" data-item-amount="1" data-item-rarity="Rarest" class="gw2-item">Banana: 1</li>
    <li data-item-id="0" data-item-name="Potato" data-item-amount="1" data-item-rarity="Rare-ish" class="gw2-item">Potato: 1</li>
  </ul>
</div>

<div class="inventory one-of-two">
  <ul>
    <li data-item-id="374" data-item-name="Banana" data-item-amount="2" data-item-rarity="Rarest" class="gw2-item">Banana: 2</li>
  </ul>
</div>

<div class="inventory one-of-two">
  <ul>
    <li data-item-id="0" data-item-name="Potato" data-item-amount="1" data-item-rarity="Rare-ish" class="gw2-item">Potato: 1</li>
  </ul>
</div>

<div class="inventory one-of-two">
  <ul>
    <li data-item-id="374" data-item-name="Banana" data-item-amount="1" data-item-rarity="Rarest" class="gw2-item">Banana: 1</li>
    <li data-item-id="0" data-item-name="Potato" data-item-amount="1" data-item-rarity="Rare-ish" class="gw2-item">Potato: 1</li>
  </ul>
</div>

CSS

#collection-of-all-items {
  display: block;
  border: 2px solid red;
  margin: 10px;
  padding: 10px;
}

h1 {
  font-size: 20px;
  padding-bottom: 10px;
}

.inventory {
  margin: 10px;
  padding: 10px;
  border: 2px solid green;
}

JavaScript

init();

function init() {

	var collector = {};
	
  $('.inventory.one-of-two').each(function() {

    $(this).find('> ul').children('li').each(function() {

        var _this = $(this),
        		_thisD = _this.data();
        
        // _thisD.itemName
        // _thisD.itemId
        // _thisD.itemAmount
        // _thisD.itemRarity
        
        if ( typeof collector[ _thisD.itemId ] == "undefined" ) {
        	collector[ _thisD.itemId ] = {};
        	collector[ _thisD.itemId ].itemAmount = _thisD.itemAmount;
        	collector[ _thisD.itemId ].itemObj = _this;
        }
        else {
        	// If object with this itemId already exists, add this amount to it.
        	collector[ _thisD.itemId ].itemAmount = collector[ _thisD.itemId ].itemAmount + _thisD.itemAmount;
        }
        
    });

  });
  
  html_structure();
  
  $.each( collector, function( itemId, item ) {

  	item.itemObj.clone().appendTo( $('#collection-of-all-items ul') );

    var newItem = $('#collection-of-all-items ul li[data-item-id="'+ itemId +'"]');

    newItem
    	.attr( 'data-item-amount', item.itemAmount )
      .html( 'Amount: ' + item.itemAmount + ' ' + newItem.attr('data-item-name') );
      
  });
  
}

function html_structure() {
	var inventory = '<div id="collection-of-all-items" class="inventory"><ul><h1>All Items:</h1></ul></div>';
  $( inventory ).prependTo('body');
}