jQuery, increment id number when dynamically appending elements

Question

I'm probably going about this wrong but here goes. I have a form that you fill out with a section in the middle that lets you add more addresses with an "add more" button.

My html:

<div class="address">
   <div class="street">
      <input type="text" name="street[]">
   </div>
   <div class="city">
      <input type="text" name="city[]">
   </div>
   <div class="addmoreadd">
      <button type="button" id="addmore">Add More Address</button>
   </div>
</div>

jQuery:

var rowNum = 0;

$("#addmore").click(function() {
      rowNum++;
      $('.address').attr('id', 'address' + rowNum);
      var html = $('.address').html();
      jQuery('.address').append(html)
      var rm = "<button type='button' class='btn' id='rmbtn'>Remove</button>"
      $('addmoreadd').append(rm);  

      $('#rmbtn').click(function() {
        $('#address' + rowNum).remove();
     }); 
 });

I'm new to jquery so I'm still learning syntax and function but here I am trying to append the extra address fields on each click of the "add more address" button, increment the parent div <div class="address"> by adding an id # to identify the number for the Remove button to locate. I want the user to be able to only remove additional addresses after the first default address.

This executes ok when the add more address button is clicked once, afterwards it keeps adding more Remove buttons next to each other. Also when adding more address fields the id's are the same (rows of #address0).

Please guide me o the right direction!

EDIT: Here is the original example that I had that wasn't working with an add more phone button:

http://jsfiddle.net/F4UhN/

Answer 1

There are several problem in your current code. One of them is that, as stated by others, the add and remove buttons are created dynamically, so you cannot just simply attach the click handler to the button. You have to either re-attach the handler anytime you create a button, or attach the handler to the body as shown by @medhi:

$("body").on("click", ".addmore", function() { ... });

One other problem is that the container of the form has no separate container for each address. So when you duplicate the form elements, you duplidate ALL the elements already created: the number of elements double each you click on add. A solution to this is to wrap the address forms in separate containers:

<div id="addresses">
  <div class="address" id="address0">
  ...
  </diV>
  <div class="address" id="address1">
  ...
  </diV>
  ...
</diV>

And one third problem is that when you duplicate an form, it may already contain a delete button if it is not the first form. In that case you should skip the delete button creation.

Below is a complete working solution.

HTML:

<div id="addresses">
    <div class="address" id="address0">
       <div class="street">
           <input type="text" name="street[]" />
       </div>
       <div class="city">
           <input type="text" name="city[]" />
       </div>
       <div class="addmoreadd">
          <button type="button" class="addmore">Add More Address</button>
       </div>
    </div>
</div>

Javascript:

var rowNum = 0;

$("body").on("click", ".addmore", function() {
      rowNum++;
      var $address = $(this).parents('.address');
      var nextHtml = $address.clone();
      nextHtml.attr('id', 'address' + rowNum);
      var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
    if (!hasRmBtn) {
      var rm = "<button type='button' class='rmbtn'>Remove</button>"
      $('.addmoreadd', nextHtml).append(rm);
    }
      $address.after(nextHtml); 
 });

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.address').remove();
});