I got a problem with form elements I want to move. This is my simple sample. There are two links to move the containers up or down.

```
<div class="unique_a unique_a_1" data-attr="unique_a_1">
  <a href="move('unique_a', 'up', 1)">Up</a>
  <a href="move('unique_a', 'down', 1)">Down</a>
  <input value="aaa">
</div>

<div class="unique_b unique_b_2" data-attr="unique_b_2">
  <a href="move('unique_b', 'up', 2)">Up</a>
  <a href="move('unique_b', 'down', 2)">Down</a>
  <input value="bbb">
</div>

```

The problem happens, when I click one of the fields, change the value of the input field and try to change my

```
function move( div, direction, counter )
{
  if( direction == 'up' ) {
    var field = $("."+ div +"_"+ counter).prev().attr("data-attr");
  } else {
    var field = $("."+ div +"_"+ counter).next().attr("data-attr");
  }

  if( field != undefined )
  {
    // Clicked element
    var current = $("."+ div +"_"+ counter).html();

    // <div> to change position with
    var other = $("."+ field).html();

    // Empty destination <div> and put in code of clicked element
    $("."+ field).empty().prepend(current);

    // Empty clicked element
    $("."+ div +"_"+ counter).empty().append(other);
  }

```

I got the problem, that if I write "ggg" to the first input field and move it down, it loses "ggg" and shows "aaa".

How can I put text to the fields and then sort the elements and keep the text I wrote?