0

I'm trying to have two sections of inputs where users can add or remove a text box, this is how my code looks. 

$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = ('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    $(addButton).click(function(){ //Once add button is clicked
        if(x < maxField){ //Check maximum number of input fields
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); // Add field html
			//$(wrapper).slideDown(800);
        }
    });
    $(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

 </br>
 
  <div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add</a>
    </div>
</div>

The "remove" link works, however when I try to add a text box, the text box is added in both sections. Is there a way of adding the text box only to the div where the "add" link is pressed from? Thank you.

Improve this question
1
  • 1
    You target both sections with your jQuery code. Add a unique class and use that class for each section to seperate them Commented Nov 6, 2017 at 20:21

3 Answers 3

Reset to default
1

$(this.parentElement).append(fieldHTML); // Add field html

Edited Answer so both can have up to 10:

`$(document).ready(function(){
var maxField = 10; //Input fields increment limitation
var addButton = $('.add_button'); //Add button selector
var wrapper = ('.field_wrapper'); //Input field wrapper
var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button" title="Remove field">remove</a></div>'; //New input field html 
$(addButton).click(function(){ //Once add button is clicked
    var theWrapper = $(this).closest(wrapper);
    var numOfChildren = theWrapper.children().length;
    if( numOfChildren < maxField){ //Check maximum number of input fields
        theWrapper.append(fieldHTML);
    }
});
$(wrapper).on('click', '.remove_button', function(e){ //Once remove button is clicked
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
});

});`

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Awesome! I really appreciate the help, I got it working now!
1

You could use jQuery's closest function - see this JSFiddle: https://jsfiddle.net/8sdpLy3L/

$(this).closest(wrapper).append(fieldHTML);
Improve this answer

7 Comments

Np - glad I could help!
Hey sorry for bothering, but I just found another issue, the "add" link runs until the counter hits 10, meaning that if I clicked 5 times in one section then I can only click it 5 times in the other section or if I clicked it 3 times in one section then I can only do 7 in the other and so on.. is there a way I can set a unique counter for each specific link? So I can click it 10 times in every section
Hey @DamianRuiz I edited my answer below so both can go up to 10 not 10 total between the 2.
@DamianRuiz np, I've made an update to the JSFiddle that makes use of the jQuery data API if the solution proposed by Nick isn't working out - jsfiddle.net/8sdpLy3L/2
@combatc2 that way doesn't work if you add 10 items to one list then remove some and then try to add more. once the count is 10 it doesn't go back down.
|
0

It's because your var wrapper = ('.field_wrapper'); //Input field wrapper is referencing the .field_wrapper class. So when you go to append with $(wrapper).append(fieldHTML); // Add field html It's adding it to both elements that have that class.

I would add an id to the wrapper you want to append the field to and separate click handlers for the add buttons, or perhaps a data attribute to the add buttons to point to the correct id.

Improve this answer

4 Comments

Similiar to the above, you can find the wrapper which is parent to the clicked button. This link has semi-related code of using similiar. stackoverflow.com/questions/9183381/… In that you need your function to take an input parameter (such as e), and that would have an e.target. Then you could append to the parent or e.target or similiar.
I wanted to use ids as well, the problem is that these sections are generated from a loop and there are about 20 of them. I could assign a different ID to all of those but it will be a long code and sometimes the loop generates more than 20 records and it will be an issue, that's why I'm using classes.
Ah, fair enough. In that case I would refer to @combatc2's answer.
Here's a better example for the event target's parent stackoverflow.com/questions/12200277/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.