title: Using jQuery to Dynamically Insert Into List Alphabetically
body: <p>I have two ordered lists next to each other. </p>
  
  <p>When I take a node out of one list I want to insert it alphabetically into the other list. The catch is that I want to take just the one element out and place it back in the other list without refreshing the entire list.</p>
  
  <p>The strange thing is that when I insert into the list on the right, it works fine, but when I insert back into the list on the left, the order never comes out right.</p>
  
  <p>I have also tried reading everything into an array and sorting it there just in case the children() method isn't returning things in the order they are displayed, but I still get the same results.</p>
  
  <p>Here is my jQuery:</p>
  
  <pre><code>function moveNode(node, to_list, order_by){
  
      rightful_index = 1;
      $(to_list)
          .children()
          .each(function(){
              var ordering_field = (order_by == "A") ? "ingredient_display" : "local_counter";
  
              var compA = $(node).attr(ordering_field).toUpperCase();
              var compB = $(this).attr(ordering_field).toUpperCase();
              var C = ((compA &gt; compB) ? 1 : 0);
              if( C == 1 ){
                  rightful_index++;
              }
          });
  
      if(rightful_index &gt; $(to_list).children().length){
          $(node).fadeOut("fast", function(){
              $(to_list).append($(node));
              $(node).fadeIn("fast");
          }); 
      }else{
          $(node).fadeOut("fast", function(){
              $(to_list + " li:nth-child(" + rightful_index + ")").before($(node));
              $(node).fadeIn("fast");
          });
      }
  
  }
  </code></pre>
  
  <p>Here is what my html looks like:</p>
  
  <pre><code>&lt;ol&gt;
  &lt;li ingredient_display="Enriched Pasta" ingredient_id="101635" local_counter="1"&gt;
       &lt;span class="rank"&gt;1&lt;/span&gt;
       &lt;span class="rounded-corners"&gt;
            &lt;span class="plus_sign"&gt;&amp;nbsp;&amp;nbsp;+&amp;nbsp;&amp;nbsp;&lt;/span&gt;
            &lt;div class="ingredient"&gt;Enriched Pasta&lt;/div&gt; 
            &lt;span class="minus_sign"&gt;&amp;nbsp;&amp;nbsp;-&amp;nbsp;&amp;nbsp;&lt;/span&gt;
       &lt;/span&gt;
  &lt;/li&gt;
  &lt;/ol&gt;
  </code></pre>