JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
		<div class = "jersey_skin">
			<div class="jersey">
				<div id="skin_cell" style="width:200px; height:150px"></div>
			</div>
		</div>
		<div class="skin_border">
		</div>
    <button id="add_skin">Add Skin</button>
	</div>

JavaScript

/* Initialize on loading */
document.getElementById('add_skin').addEventListener("click", dynamicallyAddSkins);
  
  
function dynamicallyAddSkins(){
    
var array = ['http://hitgid.com/images/%D0%BF%D0%B0%D0%BD%D0%B4%D0%B0-1.jpg','http://sweetpanda.ru/wp-content/uploads/2016/10/panda-theme-qt15.jpg','http://goodnewsanimal.ru/_nw/46/35325666.jpg','http://animalpicture.ru/wp-content/uploads/2010/07/103.jpg','https://lh5.googleusercontent.com/-lyYZZJLpAyA/Ttw_tmsOnZI/AAAAAAAAAbQ/J_lo6HUrUsA/s530/malysh-panda-spit.jpg',];
    
for(var i=0;i<array.length;i++){
    
  (function () {
          var url = array[i];

          var div = document.createElement('div');
          div.style.background = 'url('+url+')';
          div.className = "skin skin_"+i;
          div.style.width = '20px';
          div.style.height = '20px';
          div.addEventListener("click", function(){
                    document.getElementById("skin_cell").style.background = 'url('+url;+')';
                    document.getElementById("skin_cell").style.backgroundSize = '100% 100%';
          });
          document.getElementsByClassName("skin_border")[0].appendChild(div);
  }());
};
}