title: jQuery sorting inputs
body: <p>I have a table with data and need to make it sortable. After sorting the each row needs to get change in its tr id, input id and name attributes.</p>
  
  <p>Here I have done it only for the <code>name</code> attribute. But still when saving the data those lines are not in order if more than 1 sorting is done. Probably I am missing something. </p>
  
  <p>And is there so way to change all those attributes at once?</p>
  
  <pre><code>    $( "#languages &gt; tbody" ).sortable({
          items: 'tr',
          update: function(event, ui) {
              var result = $('#languages &gt; tbody').sortable('toArray');
              for(i=0; i&lt;result.length; i++) {
                  $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+result[i]+'][language]');
              }
              for(i=0; i&lt;result.length; i++) {
                  $('#'+i).attr('id', result[i]);
                  $('#Setting3Value'+i+'Language').attr('id', 'Setting3Value'+result[i]+'Language');
              }
          }
      });
  </code></pre>
  
  <p>And HTML:</p>
  
  <pre><code>&lt;table id="languages"&gt;
      &lt;tbody&gt;
                                          &lt;tr id="0"&gt;
                          &lt;td&gt;&lt;div class="input text"&gt;&lt;input type="text" id="Setting3Value0Language" rel="" value="English" name="data[Setting][3][value][0][language]"/&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;div class="input text"&gt;&lt;input type="text" id="Setting3Value0Alias" rel="" value="eng" name="data[Setting][3][value][0][alias]"/&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td/&gt;
                      &lt;/tr&gt;
                                          &lt;tr id="1"&gt;
                          &lt;td&gt;&lt;div class="input text"&gt;&lt;input type="text" id="Setting3Value3Language" rel="" value="French" name="data[Setting][3][value][1][language]"/&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;div class="input text"&gt;&lt;input type="text" id="Setting3Value1Alias" rel="" value="fre" name="data[Setting][3][value][1][alias]"/&gt;&lt;/div&gt;&lt;/td&gt;
                          &lt;td/&gt;
                      &lt;/tr&gt;
   &lt;!-- and so on ... --&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Also is it possible to set the <code>id</code>'s of table rows to <code>name-1</code> for ex. ?</p>
  
  <p><strong>EDIT:</strong> I managed to do what I need by using a temp values for the <code>id</code>'s because it was getting pretty messy. I dont think that this is the best solution so sill looking forward. Also each input needs to be listed.</p>
  
  <p><em><strong>Here is my update function:</em></strong></p>
  
  <pre><code>            for(i=0; i&lt;result.length; i++) {
                  $('#'+result[i]).attr('id', 'temp-'+i);
                  $('#Setting3Value'+result[i]+'Language').attr('id', 'temp-Setting3Value'+i+'Language');
                  $('#Setting3Value'+result[i]+'Alias').attr('id', 'temp-Setting3Value'+i+'Alias');
              }
  
              for(i=0; i&lt;result.length; i++) {
                  $('#temp-'+i).attr('id', i);
                  $('#temp-Setting3Value'+i+'Language').attr('id', 'Setting3Value'+i+'Language');
                  $('#temp-Setting3Value'+i+'Alias').attr('id', 'Setting3Value'+i+'Alias');
  
                  $('#Setting3Value'+i+'Language').attr('name', 'data[Setting][3][value]['+i+'][language]');
                  $('#Setting3Value'+i+'Alias').attr('name', 'data[Setting][3][value]['+i+'][alias]');
              }
  </code></pre>