Cloned jquery elements are triggering events to parent <div> instead of child<div>?

Question

I am building a tool where i have inserted some dynamic input fields to take input from user. I have cloned some divs from the code to make different sections. My divs are successfully cloned but the events attached to parent div is being triggered to parent div always even though i click on child div event.

I have set $("#main").clone(true).insertAfter("#main"); to change its default boolean value to trigger event. I can not figure out what to do to make it work on each cloned div instead of parent div.

This is my input form

<form name="add_name" id="add_name">  
        <div class="table-responsive">  
              <table class="table table-bordered" id="dynamic_field">  
                      <tr>  
                             <td><input class="typeahead form-control" type="text" placeholder="Enter Description"></td>
                             <td> <?php echo form_dropdown('id',$unit_name, '', 'class="form-control"');?> </td>
                             <td> <input type="quantity" class="form-control" id="quantity" placeholder="Enter Quantity"></td>
                             <td><input type="price" class="form-control" id="price" placeholder="Enter Rate"></td>
                             <td><label for="total" >Price:</label>
                             <td> <a href="#"> <span class="glyphicon glyphicon-plus" name="add" id="add"></span></td>
                      </tr> 
               </table>  
               <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  
         </div>  
</form>  

This are my javascript functions:

This one is to clone div and associated events

<script>
    $("#btnAdd").click(function() {
         $("#main").clone(true).insertAfter("#main");
    });
</script>

This is the function to generate dynamic input fields and being cloned as well

$(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"> <td><input class="typeahead form-control" type="text" placeholder="Enter Description"></td>\n\
  <td> <input type="quantity" class="form-control" id="quantity" placeholder="Enter Quantity"></td>\n\
  \n\
<td><input type="price" class="form-control" id="price" placeholder="Enter Rate"></td>\n\
 <td><label for="total" >Price:</label>\n\
<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
      });
});

Answer 1

You are cloning with id #main . From the documentation,

Using .clone() has the side-effect of producing elements with duplicate id attributes, which are supposed to be unique. Where possible, it is recommended to avoid cloning elements with this attribute or using class attributes as identifiers instead.

This is why it is always triggering on the first div. So, remove the id element from the newly created divs and try to use class .

Another way, you can just clone it $("#main").clone() and use onclick event for the dynamic elements instead of click events.