JSFiddle - React, Tailwind, and code Playground

by Williams Rivas

HTML

<form>
<table>
    <thead>
<tr>
      <th scope="col">Pista</th>
      <th scope="col">Album</th>
      <th scope="col">Artista</th>
     </tr>
</thead>
    
    <tbody>
<tr>
      <td><input id="pista1" name="pista1" /></td>
      <td><input id="album1" name="album1" /></td>
      <td><select id="artista1" name="artista1">
        <option value="">Seleccionar</option>
        <option value="1">Artista 1</option>
        <option value="2">Artista 2</option>
        <option value="3">Artista 3</option>        
       </select>
      </td>
     </tr>
</tbody>
   </table>
</form>
<button>Add</button>

JavaScript

$(document).ready(function($)
  {
   // trigger event cuando el boton es cliqueado
   $("button").click(function()
   {
    // añadir nueva fila usando la funcion addTableRow
    addTableRow($("table"));
    // prevenir que el boton redireccione a una nueva pagina
    return false;
   });
  
   // funcion que añade una nueva fila a la tabla clonando la ultima fila e 
   // incrementando los nombres y los ids en 1 para hacerlos unicos en el documento
   function addTableRow(table)
   {
    // clonar la ultima fila de la tabla
    var $tr = $(table).find("tbody tr:last").clone();
    // obtener el atributo name para los inputs y selects
 	$tr.find("input:text").val("");
    $tr.find("input,select").attr("name", function()
    {
     //  separar el campo name y su numero en dos partes
     var parts = this.id.match(/(\D+)(\d+)$/);
     // crear un nombre nuevo para el nuevo campo incrementando el numero para los previos campos en 1
     return parts[1] + ++parts[2];
    // repetir los atributos ids
    }).attr("id", function(){
     var parts = this.id.match(/(\D+)(\d+)$/);
     return parts[1] + ++parts[2];
    });
    // añadir la nueva fila a la tabla
    $(table).find("tbody tr:last").after($tr);

};
  });