Whats the proper way to move div to top?

Got some custom input dropdown. After clicking on any of it it should place at first position and collapse others. But its puts .inputGroup outside of collapsible . How to prevent it? 
  <div class="order-status" id="orderStatus">
<div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list">

</div>
<div class="inputGroup">
<input id="confirmed" name="radio" type="radio" checked>
<label for="confirmed" class="confirmed">confirmed</label>
</div>
<div class="collapse" id="order-status-list">
<div class="inputGroup">
<input id="new" name="radio" type="radio">
<label for="new" class="new">new</label>
</div>
<div class="inputGroup">
<input id="paid" name="radio" type="radio">
<label for="paid" class="paid">paid</label>
</div>
<div class="inputGroup">
<input id="shipped" name="radio" type="radio">
<label for="shipped" class="shipped">shipped</label>
</div>
<div class="inputGroup">
<input id="fulfilled" name="radio" type="radio">
<label for="fulfilled" class="fulfilled">fulfilled</label>
</div>
<div class="inputGroup">
<input id="return" name="radio" type="radio">
<label for="return" class="return">return</label>
</div>
<div class="inputGroup">
<input id="deleteOrder" name="radio" type="radio">
<label for="deleteOrder" class="deleteOrder">delete</label>
</div>
</div>
</div>

$("#orderStatus .inputGroup").click(function () {
$('#orderStatus').prepend($(this));
$('#order-status-list').collapse("hide");
    });

    $(".order-status-selector").click(function () {
$(this).toggleClass('rotated');
    });

Here is some jsFiddle.

First, remove the visible input-group and add this to order-status-list before inserting the select one.
JSFiddle
You can see here-

$("#orderStatus .inputGroup").click(function() {
  $('#order-status-list').append($('#orderStatus > .inputGroup'));
  $(this).insertAfter($('.order-status-selector'));
  $('#order-status-list').collapse("hide");
});

$(".order-status-selector").click(function() {
  $(this).toggleClass('rotated');
});
.order-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    background-color: #ccc;
}

.order-status .inputGroup input {
    position: absolute !important;
 clip: rect(0, 0, 0, 0);
 height: 1px;
 width: 1px;
 border: 0;
 overflow: hidden;
}

.order-status .inputGroup label {
    width: 170px;
    padding: 8px 20px;
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    border-radius: 32.5px;
    color: #fff;
    margin-bottom: 10px;
    font-size: 11px;
}

.order-status-selector {
    position: absolute;
    top: 5px;
    right: 130px;
    width: 30px;
    height: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 9;
}

.order-status-selector:hover {
    cursor: pointer;
}

.order-status-selector:after {
    content: url('https://api.iconify.design/simple-line-icons:arrow-down.svg?height=16&inline=true&color=%23fff');
    border: none;
    position: absolute;
    top: 3px;
    right: 0;
    width: 16px;
    height: 16px;
    z-index: 9;
    transition: transform 0.3s ease-in-out;
}

.rotated.order-status-selector:after {
    transform: rotateX(180deg);
}

.order-status .confirmed,
.order-status.confirmed {
    background-color: #39ccd2;
}

.order-status .new,
.order-status.new {
    background-color: #7db9fd;
}

.order-status .paid,
.order-status.paid {
    background-color: #f978ff;
}

.order-status .shipped,
.order-status.shipped {
    background-color: #7fc637;
}

.order-status .fulfilled,
.order-status.fulfilled {
    background-color: #057568;
}

.order-status .return,
.order-status.return {
    background-color: #d0021b;
}

.order-status .deleteOrder,
.order-status.deleteOrder {
    background-color: #282f36;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="order-status" id="orderStatus">
  <div class="order-status-selector" data-toggle="collapse" data-target="#order-status-list">

  </div>
  <div class="inputGroup">
    <input id="confirmed" name="radio" type="radio" checked>
    <label for="confirmed" class="confirmed">confirmed</label>
  </div>
  <div class="collapse" id="order-status-list">
    <div class="inputGroup">
      <input id="new" name="radio" type="radio">
      <label for="new" class="new">new</label>
    </div>
    <div class="inputGroup">
      <input id="paid" name="radio" type="radio">
      <label for="paid" class="paid">paid</label>
    </div>
    <div class="inputGroup">
      <input id="shipped" name="radio" type="radio">
      <label for="shipped" class="shipped">shipped</label>
    </div>
    <div class="inputGroup">
      <input id="fulfilled" name="radio" type="radio">
      <label for="fulfilled" class="fulfilled">fulfilled</label>
    </div>
    <div class="inputGroup">
      <input id="return" name="radio" type="radio">
      <label for="return" class="return">return</label>
    </div>
    <div class="inputGroup">
      <input id="deleteOrder" name="radio" type="radio">
      <label for="deleteOrder" class="deleteOrder">delete</label>
    </div>
  </div>
</div>