I am looking to add and remove duplicate input fields using Jquery-

This is my HTML:

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        // **** Here I want to add div using Jquery **** //

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

This is my Jquery:

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  $(wrapper).prepend('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

When I using this Jquery its always add div below the .input_wrap DIV. But I want to add DIV to the place I have shown in my HTML Code.

UPDATE: This is the way I want to get Hope somebody may help me out. Thank you.

I am looking to add and remove duplicate input fields using Jquery-

This is my HTML:

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        // **** Here I want to add div using Jquery **** //

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

This is my Jquery:

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  $(wrapper).prepend('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

When I using this Jquery its always add div below the .input_wrap DIV. But I want to add DIV to the place I have shown in my HTML Code.

UPDATE: This is the way I want to get Hope somebody may help me out. Thank you.

• javascript
• jquery
• html

7 Answers 7

You can use the after key

var wrapper = $(".input_wrap>div");
var add_button = $(".add_field_button");

$(add_button).click(function (e) {
    e.preventDefault();
    $(wrapper).after('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

Fiddle

Edit

Fiddle

Updated the fiddle to also include the remove functionallity

Created a new Fiddle Demo

I made a couple of small changes , the most important one is the

var el = $('.input_wrap div:last');

so that will basically get the last added div and then we will add the new div right after it.

$(el).after(newAdd);

<div class="col-sm-9">
    <div class="input_wrap">
        <div><input type="text" name="text[]" class="form-control"></div>   

        <div class="more-data"></div> 

        <button class="add_field_button btn btn-info">Add More Subcategory</button>
    </div>
</div>

Your js

var wrapper         = $(".input_wrap"); 
var add_button      = $(".add_field_button"); 
var moredata      = $(".more-data"); 

$(add_button).click(function(e){ 
  e.preventDefault();
  moredata.html('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
});

check the below jquery code

var add_button = $(".add_field_button");

        $(add_button).click(function(e){ 
          e.preventDefault();
          $(".input_wrap div:last").append('<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>'); //add input box
        });

Change

var wrapper         = $(".input_wrap"); 

to

var wrapper         = $(".input_wrap>div"); 

and change prepend to append to append in the existing div or after to place it after the existing div.

And I hope it should do, what you want.

How about this:

$('<div><input type="text" name="text[]" class="form-control">
<a href="#" class="remove_field">Remove</a>    
</div>').insertAfter($(wrapper).find("div")[0]) 

you can use insertAfter it require the selector after which you want to insert

var newElement='<div><input type="text" name="text[]" class="form-control"><a href="#" class="remove_field">Remove</a></div>';
$(newElement).insertAfter(".form-control");  

but you need to give another class name to newly created input.
demo

The best example that I've found is the below as seen in OP by Kevin Bowersox.

Dynamically add and remove <input> jQuery

In my example, I was building a form that would allow users to add multiple input names if they had more than one dog.

    var counter = 0
    jQuery(function () {
      $(".newDog").click(function(){
        counter ++;
        if (counter < 4) {
          var elem = $("<input/>",{
            type: "text",
            name: `dogname${counter}`
        });
        } else {
          alert("Max Dog 4")
        }
        
        var removeLink = $("<span/>").html("X").click(function(){
            $(elem).remove();
            $(this).remove();
            counter --;
        });
        
        $(".dogname-inputs").append(elem).append(removeLink);
    });
    })