title: jQuery row changing and IDs
body: <p>I've looked all over for this but haven't had much luck. </p>
  
  <p>So given this code:</p>
  
  <pre><code>$("span[id*=Section]").click(function(){
      var row = $(this).parents("tr.MoveableRow:first");
      if ($(this).is(".up_button")) {
          row.insertBefore(row.prev());
          section = this.id;
          $("input[name='" + section + "']").val(row.closest("tr").prevAll("tr").length + 1);
      } else {
          row.insertAfter(row.next());
          section = this.id;
          $("input[name='" + section + "']").val(row.closest("tr").prevAll("tr").length + 1);
      }
  });
  </code></pre>
  
  <p>Currently, when clicking on the up/down button, the TR moves up or down as expected. The "input[name=" part takes the passed in value of the span ID and assigns the new value to a hidden fields within that TR.</p>
  
  <p>What this ends up doing though is giving me duplicate IDs. So for example, I move row 2 up to row 1. The old row 2's hidden input value becomes 1, but the original 1's hidden input is also 1.</p>
  
  <p>So what I need to be able to do is make the old 1, the new 2.</p>