How to append data to a particular div in jQuery in the following scenario?

Question

My Jquery function is this

jQuery(document).ready(function(){
            var content='<div class="input-parameters"><div><label>Url</label><div class="inputContainer"><textarea rows="4" cols="25" readonly></textarea></div></div>'+

                    '<div class="saveButtonDiv"><button type="button" class="btn" class="saveButton">Save</button></div>';

            jQuery( "#container" ).on( "click","#saveAndAddNew", function() {
                jQuery('.redirect').append(content);
            });

            var networkContent='<div class="wrapper"><div class="NetworkSelection">+
                                  '<div class="redirect">'+content +'</div>'+
                                  '<div class="buttonContainer">'+
                                  '<button type="button"                              class="btn" id="saveAndAddNew">Add New</button>
                                     </div></div>';
              jQuery('#saveAndAddNetwork').click(function(){
                jQuery('#container').append(networkContent);
            })
        })

and my html is

div id="container">
    <div class="wrapper">
        <div class="NetworkSelection">
            <div class="redirect">
                <div class="input-parameters">
                    <div>
                        <label>Redirect Url</label>
                        <div class="inputContainer">
                            <textarea rows="4" cols="25" readonly>

                            </textarea>
                        </div>
                    </div>
                    <div class="clear"></div>
                    <div class="inputParams">
                        <div >
                            <label>Campaign</label>
                            <div class="inputContainer">
                                <input type="text"  class="input-medium"/>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div>
                            <label>Creative Id</label>
                            <div class="inputContainer">
                                <input type="text" class="input-medium"/>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <div class="saveButtonDiv"><button type="button" class="btn" id="save">Save</button></div>
                    <div class="clear"></div>
                </div>

            </div>
            <div class="buttonContainer">

                <button type="button" class="btn" id="saveAndAddNew">Add New</button>
            </div>

        </div>
    </div>
    <div class="networkButtonContainer">
        <button type="button" class="btn-small">Save</button>
        <button type="button" class="btn-small" id="saveAndAddNetwork">Save & Add Network</button>
    </div>
</div>

What I am trying to do here is on click of 'Add New' button I am appending 'content' to a div with a class ="redirect" and on click of 'save and add network' button I am appending the networkContent to the div with id 'container'. Now the problem is if I am clicking 'Add New' button in the div that is appended,the 'content' is added to both,the appended div and also existing div's .I want it to be added to only the div that I am clicking. How should I acheive this.?

Answer 1

The content was appended to all divs that have redirect classes so you have to narrow the context while finding the right place to append. For example, try this:

jQuery("#container").on("click", "#saveAndAddNew", function() {
    jQuery(this).closest(".NetworkSelection").find(".redirect").append(content);
});