Editing input name and id after cloning table row

Question

After clicking the button, the last row of the table is cloned. Every row has different input labels with names and ids ending in "_" + number of row where they are.

The new row added to the table include the same fields but the names and ids are not increasing in each row.

After checking similar questions I thought of adding the following code in my jquery function (code is commented in snippet).

$('#tablaFamilias tbody>tr:last').find("input").each(function (index, label){
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
});

But it doesn't change the attributes and I get the following error in the browser's console: "Uncaught ReferenceError: input is not defined"

What is wrong with the function? Thanks for your help.

$("#cargarFamilias").click(function() {

  var currentCount = $("#tablaFamilias tr").length;
  var newCount = currentCount + 1;
  $('#tablaFamilias tbody>tr:last').clone(true).insertAfter('#tablaFamilias tbody>tr:last');
  /*
  $('#tablaFamilias tbody>tr:last').find("input").each(function(index, label) {
    input.id = input.id.replace("_" + currentCount, "_" + newCount);
    input.name = input.name.replace("_" + currentCount, "_" + newCount);
  });
  */

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

1. Make use of this...

You're iterating through inputs in the row using each(), meaning you can use this to refer to the current input (instead of input which won't work).

var newid = $(this).attr("id").replace("_" + currentCount, "_" + newCount);
var newname = $(this).attr("name").replace("_" + currentCount, "_" + newCount);
$(this).attr("id", newid).attr("name", newname);

---

2. Your currentCount is including the header...

With 1 data row, currentCount is actually 2. Because 2 is not in the id or the name, no replace is made.

You can either subtract one to compensate for the header:

var currentCount = $("#tablaFamilias tr").length-1;

...or not include the header in your select by getting a bit more specific:

var currentCount = $("tableFamilias tbody tr").length;

---

3. You aren't incrementing your select elements...

You're only incrementing the input elements, but I have to assume you also want to increment the select elements:

$('#tablaFamilias tbody>tr:last').find("input, select").each( ... );

---

Put it all together...

$("#cargarFamilias").click(function() {

  var currentCount = $("#tablaFamilias tr").length-1;
  var newCount = currentCount + 1;
  $('#tablaFamilias tbody>tr:last').clone(true).insertAfter('#tablaFamilias tbody>tr:last');

  $('#tablaFamilias tbody>tr:last').find("input, select").each(function() {
    var newid = $(this).attr("id").replace("_" + currentCount, "_" + newCount);
    var newname = $(this).attr("name").replace("_" + currentCount, "_" + newCount);
    $(this).attr("id", newid).attr("name", newname);
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

Your click event should be like following. Two things

1. You need to calculate currentCount by #tablaFamilias tbody tr selector instead of #tablaFamilias tr.
2. Use attr() method to set id and name.

$("#cargarFamilias").click(function() {
    var currentCount = $("#tablaFamilias tbody tr").length, 
        newCount = currentCount + 1;
        
    $('#tablaFamilias tbody > tr:last').clone(true).insertAfter('#tablaFamilias tbody > tr:last');
  
    $('#tablaFamilias tbody>tr:last').find("input").each(function() {
        var newId = this.id.replace("_" + currentCount, "_" + newCount);
        var newName = this.name.replace("_" + currentCount, "_" + newCount);

        $(this).attr('id', newId);
        $(this).attr('name', newName);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<a id="cargarFamilias" class="btn btn-primary">
  <i class="fa "></i> Cargar conceptos de familia
</a>

<table id="tablaFamilias" class="table table-hover">
  <thead class="thead-inverse">
    <th>Partida</th>
    <th>Código</th>
    <th>Descripción</th>
    <th>Plazo de entrega</th>
    <th>Cantidad</th>
    <th>UM</th>
    <th>Lugar de entrega</th>
    <th>Dirección de entrega</th>
    <th></th>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="partida_1" id="partida_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="codigo_1" id="codigo_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="descripcion_1" id="descripcion_1" class="form-control" disabled/>
      </td>
      <td>
        <input type="text" name="plazoentrega_1" id="plazoentrega_1" class="form-control" />
      </td>
      <td>
        <input type="text" name="cantidad_1" id="cantidad_1" class="form-control" />
      </td>
      <td class="col-md-1">
        <input type="text" name="um_1" id="um_1" class="form-control" disabled/>
      </td>
      <td>
        <select name="lugarentrega_1" id="lugarentrega_1"></select>
      </td>
      <td class="col-md-2">
        <input type="text" name="direccionentrega_1" id="direccionentrega_1" class="form-control" />
      </td>
      <td id="td-not">
        <a title="Eliminar" class="btn btn-danger btn-xs"><span class="fa fa-trash"></span></a>
        <a title="Detalles" class="btn btn-info btn-xs"><span class="fa fa-info-circle"></span></a>
      </td>
    </tr>
  </tbody>
</table>