JSFiddle - React, Tailwind, and code Playground

HTML

<div id="elements">
  <img src="http://i.imgur.com/TuHUIAC.gif" class="group1 hidden" />
  <img src="http://i.imgur.com/dUeBcoU.png" class="group2 hidden" />
</div>

<button>Click Me</button>

CSS

.hidden { display: none; }

JavaScript

var data = {
    "id": "1",
    "username": "user5613506",
    "data": {
        "items": [
            {
                "id": 1,
                "name": "Item #1",
                "picture": "assets/images/thumbnails/item1.jpg",
                "group": "group1",
                "amount": 2,
            },
            {
                "id": 2,
                "name": "Item #2",
                "picture": "assets/images/thumbnails/item2.jpg",
                "group": "group2",
                "amount": 3,
            }
        ]
    }
};

var index = 0;

$( 'button' ).click( function() {
  
  index++;

  if( index >= data.data.items.length ) index = 0;

  var $elements = $( '#elements' );
  var $icon = $elements.children( 'img.' + data.data.items[ index ].group ).slice( 0, 1 );

  $elements.children( 'img' ).addClass( 'hidden' );

  for( var i = 0; i < data.data.items[ index ].amount; i++ ) {
    $icon.clone().removeClass( 'hidden' ).appendTo( $elements );
  }
});