title: Changing input name using JQUERY
body: <p>I'm trying to change all the input name based on the list index of <code>&lt;li&gt;</code> but it seems like it's not changing at all.</p>
  
  <pre><code>$('.test').click(function() {
  for(var i=0;i&lt;$("li.songs").length;i++)
  {
    var ob = $("li.songs").eq(i).clone();
    ob.find('input').each(function()
    {
      this.name = this.name+i;
      alert(this.name); //just checking if does it change
    });      
  }
  });
  </code></pre>
  
  <p>Now, the alert displays the right name I want, BUT no changes on the name when I inspect the element AND try to submit the form and display all the POST values.</p>
  
  <p>Example expected output before changing:</p>
  
  <pre><code>&lt;li class="songs"&gt;&lt;input type="text" name="song" /&gt;&lt;/li&gt;
  &lt;li class="songs"&gt;&lt;input type="text" name="song" /&gt;&lt;/li&gt;
  &lt;li class="songs"&gt;&lt;input type="text" name="song" /&gt;&lt;/li&gt;
  </code></pre>
  
  <p>After changing:</p>
  
  <pre><code>&lt;li class="songs"&gt;&lt;input type="text" name="song1" /&gt;&lt;/li&gt;
  &lt;li class="songs"&gt;&lt;input type="text" name="song2" /&gt;&lt;/li&gt;
  &lt;li class="songs"&gt;&lt;input type="text" name="song3" /&gt;&lt;/li&gt;
  </code></pre>
  
  <p>NOTE: I DO NOT WANT the input named song to be an ARRAY.</p>