Question: I would like to inverse two div inside a bigger div when the user choose something on an input radio. 

I have this html: 

```
<input type="radio" name="orderBy" id="orderByAsc" value="asc" >
<input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div class="col-md-10">
    <div class="tags">
        //Stuff inside
    </div>
    <div class="tagsDifficile">
        //Stuff inside
    </div>
</div>

```

So i have tried something like that in javascript: 

```
$('input[type=radio]').change(function (){
    valueRadio = this.value;
    $('.col-md-10 > div').each(function() {
        if(valueRadio == 'asc'){
            $(this).prependTo(this.parentNode);
        }else{
            $(this).appendTo(this.parentNode);
        }
    });
});

```

But it's not working and when i click on the radio desc, the div do not move. 
It's working when i click on the radio asc, but nothing on desc.
Your help would be very appreciate. Thanks in advance for your answer.

Answer: 
```js
$(document).on('change', 'input[name=orderBy]', function() {
  var that = $(this);
  var val = that.val();
  var wrp = $('#wrp');
  var one = $('#one');
  var two = $('#two');
  if (val == 'desc') {
    var oneC = one.clone();
    one.remove();
    two.before(oneC);
  } else if (val == 'asc') {
    var twoC = two.clone();
    two.remove();
    one.before(twoC);
  }
});
```

```css
.tags {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}
#one { background-color:green }
#two { background-color:red }
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Asc: <input type="radio" name="orderBy" id="orderByAsc" value="asc" >
Desc: <input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div id="wrp" class="col-md-10">
    <div id="one" class="tags">
        //Stuff inside (one)
    </div>
    <div id="two" class="tags">
        //Stuff inside (two)
    </div>
</div>
```
It's because when you're clicking the radio desc, it trigger the `else` statement which will append the `div` to the end before it's container closing tags, so if it run, it will results in something like this

Start:

```
<div id="container">
    <div id="1">1</div>
    <div id="2">2</div>
</div>

```

1st iteration on div#1, the arrangement become

```
<div id="container">
    <div id="2">2</div>
    <div id="1">1</div> //div#1 moved to before the end of the container
</div>

```

then for the 2nd iteration on div#2, the arrangement become

```
<div id="container">
    <div id="1">1</div>
    <div id="2">2</div> //div#2 moved to before the end of the container
</div>

```

which causing it not to show any difference, different with the prepend that move it to the begining of the container, if using the same Start, the 1st iteration on div#1 will be like this

```
<div id="container">
    <div id="1">1</div> //div#1 moved to after the start of the container
    <div id="2">2</div>
</div>

```

and the 2nd iteration on div#2 will result in

```
<div id="container">
    <div id="2">2</div> //div#2 moved to after the start of the container
    <div id="1">1</div>
</div>

```

So if your `div` has been sorted from the start, you can just use the `$(this).prependTo(this.parentNode);` whether for the Ascending or Descending