JSFiddle - React, Tailwind, and code Playground

by ldiego

HTML

<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'>
<style>
    html,body,div,table,p,input{
        font-family:Verdana,Arial;            
    }
</style>

<button id="addUser">Agregar Usuario</button>
<br/>
<table width="90%" border="0" id="tabla">
  <tbody>
      <tr id="row1">
        <th scope="row">
            Especifica
            <input type="text" name="Especificas[]" id="Especifica1">
        </th>
        <th scope="row">
            Resultado 
            <input type="text" name="Resultados[]" id="Resultado1">
        </th>
        <th scope="row">
            <button id="deleteUser1" data-id="1">Eliminar</button>
        </th>  
      </tr>
    </tbody>
</table>

JavaScript

var pos=2;

$(document).ready(function(){
    var listado = new Array('Diego','Luis','Ruth','Maria','Juan','Carlos','Jose','Miguel','Andres','Tomas','Jacob');
    $('#addUser')
        .button()
        .on({
            click: function(){
                $('#tabla tbody')
                    .append("<tr id='row"+pos+"'><td><input type='text' id='Especifica"+pos+"'  name='Especificas[]' value=''></td><td> <input type='text'  name='Resultados[]' id='Resultado"+pos+"' ></td><td><button id='deleteUser"+pos+"' data-id='"+pos+"'>Eliminar</button></td></tr>");
                
                $( "#Especifica" + pos).autocomplete({
                    source: listado
                });
                $( "#Resultado" + pos).autocomplete({
                    source: listado
                });
                $('#deleteUser'+pos)
                    .button()
                    .on({
                        click: function(){
                            var id = $(this).attr('data-id');
                            $('#row'+id).remove();
                        }
                    });
                pos++;
            }
        });
    $('#deleteUser1')
        .button()
        .on({
             click: function(){
             var id = $(this).attr('data-id');
             $('#row'+id).remove();
         }
    });
    
    $( "#Especifica1" ).autocomplete({
        source: listado
    });
    $( "#Resultado1" ).autocomplete({
        source: listado
    });
    
    
});