title: the logic of pushing up and sorting a data list
body: <p>I have 100 rows of textarea(s) that a user may add information to (not in any particular order) the textareas look like this:</p>
  
  <pre><code>var item='&lt;textarea class="itemv"id="k'+k+'"rows="1"style="width:100%;border:none;border-bottom:1px solid #CCC;outline:none;resize:none;background:none;font-weight:bold;"&gt;'+_.k+'&lt;/textarea&gt;&lt;br&gt;';
  </code></pre>
  
  <p>I am attempting to 'push up' all values that aren't 'undefined' into any blank textareas. leaving blank text areas at the bottom and populated textareas at the top. I am in doing this preserving the order in witch things were written by the user, here is the code:</p>
  
  <pre><code>$('#save2').unbind().bind('click', function () {
    $($('#items .itemv').get().reverse()).each(function () {
      var $prev = parseInt($(this).attr('id').replace('k', '')) - 1;
      $prev = $('#k' + $prev);
      if ($(this).val() !== '' &amp;&amp; $prev.val() === '') {
        $prev.val($(this).val());
        $(this).val('');
        //do again
        $($('#items .itemv').get().reverse()).each(function () {
          var $prev = parseInt($(this).attr('id').replace('k', '')) - 1;
          $prev = $('#k' + $prev);
          if ($(this).val() !== '' &amp;&amp; $prev.val() === '') {
            $prev.val($(this).val());
            $(this).val('');
            //do again
            $($('#items .itemv').get().reverse()).each(function () {
              var $prev = parseInt($(this).attr('id').replace('k', '')) - 1;
              $prev = $('#k' + $prev);
              if ($(this).val() !== '' &amp;&amp; $prev.val() === '') {
                $prev.val($(this).val());
                $(this).val('');
                //do again
                $($('#items .itemv').get().reverse()).each(function () {
                  var $prev = parseInt($(this).attr('id').replace('k', '')) - 1;
                  $prev = $('#k' + $prev);
                  if ($(this).val() !== '' &amp;&amp; $prev.val() === '') {
                    $prev.val($(this).val());
                    $(this).val('');
                  }
                });
              }
            });
          }
        });
      }
    });
  });
  </code></pre>
  
  <p>my problem is that I am running this code multiple times to get the job done (rather silly really) I can't get my head around the logic. If I only run it once like:</p>
  
  <pre><code>$($('#items .itemv').get().reverse()).each(function () {
    var $prev = parseInt($(this).attr('id').replace('k', '')) - 1;
    $prev = $('#k' + $prev);
    if ($(this).val() !== '' &amp;&amp; $prev.val() === '') {
      $prev.val($(this).val());
      $(this).val('');
    }
  });
  </code></pre>
  
  <p>then only the first textareas value that is after a textarea with a value of undefined gets pushed up to the top, its new value becomes the second text area that would be moved to the top. I would like to solve this with out the use of a sorting plugin, can someone help me understand the logic?</p>
  
  <p>fixed... with the help of @Patrick Evans in chat</p>
  
  <pre><code>$($('#items .itemv').get().reverse()).each(function(){ 
      var $prev=parseInt($(this).attr('id').replace('k','')) - 1;$prev=$('#k'+$prev); 
      if( $(this).val() != "" &amp;&amp;$prev.val()==='') { 
          $('#items .itemv').filter(function(){return this.value=="";}).first().val(   $(this).val() );$(this).val(''); 
  } 
  });
  </code></pre>