DIV Drawing Duplication And Priority

Question

I have a jsfiddle I'm working on here: https://jsfiddle.net/laroy/f9dhrrgg/

as you can see, there is a 3D column type image that I've created. I would like to duplicate this, and move the duplication to the right and on top of the original, such that they are overlapping. I've tried figuring it out but haven't been able to, so any help would be appreciated.

The code is as follows:

.ultra {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: white;
  z-index: 1;
}

.sub_ultra {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
  margin-top: 5em;
  z-index: 1;
}

.right_side {
  height: 390px;
  width: 177px;
  overflow: hidden;
  background-color: yellow;
  margin-left: 10em;
  margin-top: -7em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

.bottom_side {
  height: 380px;
  width: 142px;
  overflow: hidden;
  background-color: red;
  margin-left: 7.1em;
  margin-top: -6.8em;
  position: absolute;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
}

<div class="ultra">
  <div class="sub_ultra"></div>
</div>

<div class="right_side"></div>
<div class="bottom_side"></div>

Answer 1

This can be easily accomplished by wrapping your image in a relatively positioned container and using jQuery clone to create another copy.

jQuery Fiddle

No jQuery Fiddle

HTML

<div class="container">
  <div class="image-wrap">
    <div class="ultra">
      <div class="sub_ultra"></div>
    </div>

    <div class="right_side"></div>
    <div class="bottom_side"></div>
  </div>
</div>

jQuery

$(".image-wrap").clone().appendTo(".container").addClass("shifted")

Js (No jQuery)

var node = document.querySelector(".image-wrap").cloneNode(true);
node.className = node.className + " shifted";
document.querySelector(".container").appendChild(node);

New Css

.container {
  position: relative;
  margin-top: 20px;
  display: inline-block;
}
.shifted {
  position: absolute;
  top: -20px;
  right: -20px;
}