Div is not affected by function after cloning?

Question

This is my first post here.

I'm trying to make a doll-dress-up-thingy, and I'm a bit stuck.

Basically:

• User clicks img in one of the 4 categories → It and its' parent is cloned to #base and "wearing" tab. (This works)
• User clicks on the cloned div in the "wearing" tab, and it gets removed from #base and the "wearing" tab (but the original, non-cloned div stays) (This does not work. Nothing happens.)

This is what I have so far: https://jsfiddle.net/v0yefez5/14/

 $( ".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" );
   }
 } );

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>