JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Clothing mixer</h1>
<div class="container">
  <div id="avatar_box">
    <div id="base"><img src="https://i.imgur.com/FBCF5Mq.png"></div>
  </div>
  <div id="roulette">
    <div id="categoryBar">
      <div class="categoryButton ThisOneIsActive">
        Hair
      </div>
      <div class="categoryButton">
        Skin
      </div>
      <div class="categoryButton">
        Pants
      </div>
      <div class="categoryButton">
        Skirt
      </div>
      <div class="categoryButton" id="youreWearing">
        Wearing
      </div>
    </div>
    <div id="wardrobe_content">
      <div class="categoryContent ThisOneIsActive" id="c0">
        <div class="window hair"><img class="category hair" id="item_id_1" src="https://i.imgur.com/k0TXwzN.png"></div>
        <div class="window hair"><img class="category hair" id="item_id_2" src="https://i.imgur.com/ZdrNHKy.png"></div>
      </div>
      <div class="categoryContent" id="c1">
        <div class="window skin"><img class="category skin" id="item_id_3" src="https://i.imgur.com/lf8WdTw.png"></div>
      </div>
      <div class="categoryContent" id="c2">
        boxes of items pants
      </div>
      <div class="categoryContent" id="c3">
        boxes of items skirts
      </div>
    </div>
    <div class="items_on_doll" id="c4">
      &nbsp;
    </div>
  </div>
</div>

CSS

html,
body {
  font-family: sans-serif;
  margin: 0;
  width: 100%;
  height: 100%;
}

h1 {
  font-size: 48px;
}

.container {
  background: pink;
  width: 700px;
  height: 330px;
  padding: 10px;
}

#base {
  width: 200px;
  height: 330px;
  background: white;
  float: left;
  position: relative;
}

#base img {
  pointer-events: none;
}

#wardrobe_content img[class$="onDoll"] {
  background: red;
}

#roulette {
  float: right;
  width: 400px;
  height: 330px;
  background: yellow;
}

#categoryBar p {
  display: inline-block;
  padding: 7px;
  background: pink;
  margin: 0;
}

p.activeCategory {
  color: #f00;
}

#base img.onDoll {
  position: absolute;
  top: 0;
  left: 0;
}

.window img.onDoll {
  position: absolute;
  top: 0;
  left: 0;
}

.window {
  position: relative;
  background: pink;
  overflow: hidden;
  margin: 5px;
  cursor: pointer;
  background-image: url(https://i.imgur.com/FBCF5Mq.png);
}

.window.hair {
  width: 80px;
  height: 100px;
  background-position: -62px -30px;
}

.window.hair img {
  position: absolute;
  left: -62px;
  top: -30px;
}

.window.skin {
  height: 251px;
  background-position: -48px -49px;
  width: 90px;
}

.window.skin img {
  position: absolute;
  left: -48px;
  top: -49px;
}

.items_on_doll .window {
  background: red;
}

.categoryButton {
  background: pink;
  cursor: pointer;
  padding: 7px;
  display: inline-block;
  margin: 2px;
}

.categoryButton#youreWearing {
  float: left;
  margin-left: -75px;
}

.categoryButton:hover {
  background: red;
}

.categoryButton.ThisOneIsActive {
  background: red;
}

.categoryContent,
.items_on_doll {
  display: none;
}

.categoryContent.ThisOneIsActive,
.items_on_doll.ThisOneIsActive {
  display: block;
  height: 294px;
  overflow: auto;
}

JavaScript

$( ".categoryButton" ).on( "click", function() {
	  $( ".ThisOneIsActive" ).removeClass( "ThisOneIsActive" );
	  $( this ).addClass( "ThisOneIsActive" );
	  var CategoryNumber = $( ".categoryButton" ).index( this );
	  var CategoryID = "c" + CategoryNumber;
	  $( "#c" + CategoryNumber ).addClass( "ThisOneIsActive" );
	} );


$( ".window img" ).click( function() {
	  var aide = $( this ).attr( 'id' );
	  //console.log( aide );
	  if ( $( this ).hasClass( "onDoll" ) ) {
	    $( this ).removeClass( "onDoll" );
	    $( "#base" ).find( "#" + aide ).remove();
	    $( ".items_on_doll" ).find( "#" + aide ).parent().remove();
	    //console.log( "REMOVED FROM DOLL" );
	  }
	  else {
	    $( this ).addClass( "onDoll" );
	    $( this ).clone().appendTo( "#base" );
	    $( this ).parent().clone().prependTo( ".items_on_doll" );
	    //console.log( "ADDED TO DOLL" );
	  }
	} );