Question: I have the below jquery which prepends the clicked menu item to the top of the unordered list.

```
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

$('li').on('click', function() {
    $(this).parent().prepend(this);
});

```

What I want to have happen instead of moving it to the top of the list I want to place it after the next item I click on in the list. For example if I click on 2 then 3 the list item with the value of 2 would move after 3 in the list so the html would look like this.

```
<ul>
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
</ul>

```

I have attempted to do this with the below jQuery [see fiddle](http://jsfiddle.net/mUHLA/), this works the first time I click on 2 then 3 but it doesn't work if you continue to click. How can this be achieved?

```
$('li').on('click', function() {
    var test = this;
    console.log($(this).text());
    $('li').on('click', function() {
        $(this).after(test);
    });
    //$(this).parent().prepend(this);
});

```

Answer: 
I think, what you might need is to store the first click element and then use it in the second click like below

```
jQuery(function(){
    var item;
    $('li').on('click', function () {
        if (item) {
            $(this).after(item)
            item = undefined;
        } else {
            item = this;
        }
    });
})

```

Demo: [Fiddle](http://jsfiddle.net/arunpjohny/jx7Aq/)
try this ..its working...

```
 $('li').on('click', function() {
        var test = this;
        $(this).next("li").after(test);
    });

```