Add/remove multiple inputs jquery

Question

i have the code below

$(document).ready(function(){

    var input = '<p><input type="text" name="alternativas[]" /> <a href="#" class="remove"><img src="images/ico_excluir.gif" /></a></p>';

    $("input[name='add']").click(function( e ){
        $('#inputs').append( input );
    });

    $('#inputs').delegate('a','click',function(){
        $( this ).parent('p').remove();
    });

});

and i have a lot of forms in the same page

    <table width="100%" border="0" cellspacing="10" cellpadding="0" div="alter">
<form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 1</h3></td>
    </tr>  
  <tr>
    <td width="30%" align="right">Question:</td>
    <td><input type="text" value="Where are you from?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="1" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="Brazil" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="EUA" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="Mexico" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" checked>
      Yes <input name="inserir_varios" type="radio" value="N" >
      No</td>
    </tr>
    </form>
    <form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 2</h3></td>
    </tr>  
  <tr>
    <td align="right">Question:</td>
    <td><input name="pergunta" type="text" value="How old are you?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="2" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="&lt; 18" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="&gt; 18" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" checked>
      Yes <input name="inserir_varios" type="radio" value="N" >
      No</td>
    </tr>

    </form>
    <form action="/teste/fono2014/admin/pesquisa_editar.php" method="get" enctype="multipart/form-data">
      <tr>
    <td colspan="2" align="center"><h3>QUESTION 3</h3></td>
    </tr>  
  <tr>
    <td align="right">Question:</td>
    <td><input name="pergunta" type="text" value="Where do you live?" /></td>
    </tr>

    <tr>
    <td align="right">Sequence:</td>
    <td><input name="ordem_pergunta" type="text" value="3" onkeypress='return SomenteNumero(event)' /></td>
    </tr>
        <tr>
    <td align="right">Alternatives:</td>
    <td><input type="button" name="add" value="Add" />
    <div id="inputs">
            <p><input type="text" name="alternativas[]" value="New York" /> <a href="#" class="remove">Remove</a></p>
            <p><input type="text" name="alternativas[]" value="San Diego" /> <a href="#" class="remove">Remove</a></p>
  </div>
</td>
    </tr>
        <tr>
    <td align="right">More than one?</td>
    <td><input name="inserir_varios" type="radio" value="S" >
      Yes <input name="inserir_varios" type="radio" value="N" checked>
      No</td>
    </tr>
    </form>
</table>

When i click add the code just add the new input on the first div. What can i do ?

i have no ideia what i can do, i don't know jquery very well. i thought to put a random variable on id to each form and the button "Add" get this id, but i dont know how to do it.

Answer 1

Try using a class instead of the id #inputs. Ids are only meant to exist one time in the page. Jquery uses document.getElementById() to retrieve the dom element which will return the first element containing that id. You are allowed to use the same class name multiple times. if you added the class inputs to the divs and used the selector .inputs you should get the desired result.

You can change your jquery to append to the correct div as follows (it looks like the add button is always right before the div you are adding to):

$("input[name='add']").click(function( e ){
    $(this).next().append( input );
});

This way, you wont even need a class to reference. It will add the input to the div after the add button.

Answer 2

to apply the code to all form field with name = 'add' , you need to remove '' and try like this

$("[name=add]")

and if you want to apply only first element try like below,

$("#add")

i.e) $("[name=add]").click();  &   $("#add").click()

the same to append with all input fields

$('input').append()  

and to have particular inputs, have common dummy class and assign it like below

$('.classname').append()

Answer 3

I write an example, with jQuery 2.0.2.

This is a jsfiddle that I write as example: here you are a link: http://jsfiddle.net/tLXtd/

A piece of code:

 $('#addInput').click(function() {

                $('<p><label for="myInput"><input type="text" id="myInput_' + i +'" size="20" name="myInput' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remInput" onclick="removeMe('+ i +')">Remove</a> ').appendTo(myDiv);
                i++;
                return false;
        });


    removeMe = function(id){

        if( i > 2 ) {
           $('#myInput_'+id).parents('p').remove();

            i--;
        }
        return false;
    }