JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    </head>
  <body>
    <form action="#" method="post">
      <table id="items">
        <tr>
          <th>Item</th>
          <td><input type="text" name="item_0" value="item_0"><td>
        </tr>
      </table>
      <input type="button" id="newItem" value="Add Item">
    </form>
    <pre id="thisData"></pre>
    <pre id="formData"></pre>
  </body>
</html>

JavaScript

var curItem = 0;
$(document).ready(function()
{
  $("#newItem").click(function()
  {
    curItem++;
    addItem($("#items"), curItem);
  });
});

function addItem(elem, iter)
{
  var lastRow = elem.find("tr:last");
  var newRow = lastRow.clone(true);

  newRow.find(":input").each(function()
  {
    var newName = $(this).attr("name").replace(/^(.*)_\d+$/, "$1_" + iter);

    // THIS CHANGES THE WRONG ELEMENT    
    $(this).attr("name", newName);
    
    // THIS WORKS
    //this.name = newName;
    
    $(this).val(newName);
    $("#thisData").text($(this).serialize());
  });
  
  lastRow.after(newRow);
  
  $("#formData").text($("form").serialize());
}