Q:

How to moves the divs by clicking on each one

I want to when I click on every div 
 It's the first to be in front of  everyone and the others div are moved.for example div4 is in front of everyone.when I click on div1 I want to put div1 in place of div4 and Then again, on each one that I click on, it's the front but My code does not work properly after several times and does not display one of the shapes.

$(".haml-category").click(function() {
  var top = $(this).data("top");
  var zindex = $(this).data("zindex");
  var temp = $(".haml-category-container").find(".selected");
  $(".haml-category-container").find(".selected").removeClass("selected").data("zindex", zindex).data("top", top).css({
    "z-index": zindex,
    "top": top
  });
  $(this).data("zindex", temp.data("zindex")).data("top", temp.data("top")).addClass("selected");

});
.haml-category-container {
  position: relative;
background-color:#ccc;
}

.haml-category {
  position: absolute;
  width: 100%;
  height: 500px;
  top: 0;
  right: 0;
  border: 1px solid black;
  transition: top 1s;
}

.sec-saheb-bar {
  z-index: 0;
}

.sec-ranande {
  z-index: 1;
  top: 40px;
}

.sec-barbar {
  z-index: 2;
  top: 85px;
}

.sec-bazaryab {
  z-index: 3;
  top: 130px;
}

.selected {
  z-index: 3;
  top: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="haml-category-container">
  <div class="haml-category sec-saheb-bar" id="sec-saheb-bar" data-zindex="0" data-top="0">
    <h6>div1</h6>
    <p> content div1</p>
  </div>
  <div class="haml-category sec-ranande" id="sec-ranande" data-zindex="1" data-top="40">
    <h6>div2</h6>
    <p> content div2</p>
  </div>
  <div class="haml-category sec-barbar" id="sec-barbar" data-zindex="2" data-top="85">
    <h6>div3</h6>
    <p> content div3</p>
  </div>
  <div class="haml-category sec-bazaryab selected" id="sec-bazaryab" data-zindex="3" data-top="130">
    <h6>div4</h6>
    <p> content div4</p>
  </div>
</div>

A:

The variable temp may has be changed,modified as below.

$(".haml-category").click(function() {
  var top = $(this).data("top");
  var zindex = $(this).data("zindex");
  var temp = $(".haml-category-container").find(".selected");
  var top2 = temp.data("top");
  var zindex2 = temp.data("zindex");
  $(this).data("zindex", zindex2).data("top", top2).css({
    "z-index": zindex2,
    "top": top2
  }).addClass("selected");
  temp.removeClass("selected").data("zindex", zindex).data("top", top);
  temp.css({
    "z-index": zindex,
    "top": top
  });

});
.haml-category-container {
  position: relative;
}

.haml-category {
  position: absolute;
  width: 100%;
  height: 500px;
  top: 0;
  right: 0;
  border: 1px solid black;
  transition: top 1s;
}

.sec-saheb-bar {
  z-index: 0;
}

.sec-ranande {
  z-index: 1;
  top: 40px;
}

.sec-barbar {
  z-index: 2;
  top: 85px;
}

.sec-bazaryab {
  z-index: 3;
  top: 130px;
}

.selected {
  z-index: 3;
  top: 130px;
}
#sec-saheb-bar{
  background-color:#0077CC;
}
#sec-ranande{
  background-color:#1F1D1C;
}
#sec-barbar{
  background-color:#FECD45;
}
#sec-bazaryab{
  background-color:#1AA160;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="haml-category-container">
  <div class="haml-category sec-saheb-bar" id="sec-saheb-bar" data-zindex="0" data-top="0">
    <h6>div1</h6>

  </div>
  <div class="haml-category sec-ranande" id="sec-ranande" data-zindex="1" data-top="40">
    <h6>div2</h6>

  </div>
  <div class="haml-category sec-barbar" id="sec-barbar" data-zindex="2" data-top="85">
    <h6>div3</h6>

  </div>
  <div class="haml-category sec-bazaryab selected" id="sec-bazaryab" data-zindex="3" data-top="130">
    <h6>div4</h6>

  </div>
</div>

