how can i get id/ generate id of dynamically generated elements in html using jquery?

Question

Hi i have a student profile form where student can fill their details. Student can add school, add high school and add college dynamically by clicking add school, add high school and add college anchor tag.

Student Profile

Code for this form is as below

    




    
    
       
        
                   
                        
                            
 Education Details
                        
                        
                            
                                Schools:
                            
                            
                                
                                
                        
                        
                            
                            
                            
                                Add Schools
                            
                        
                        
                            


                        
                        
                            
                                High School:
                            
                            
                                
                                
                        
                        
                            
                            
                            
                                Add High Schools
                            
                        
                        
                            


                        
                        
                            
                                College:
                            
                            
                                
                                
                        
                        
                            
                            
                            
                                Add College

It works perfect and add any no of elements dynamically but when i see the page source of this page i get to know that its not generating new elements id.

It looks like this..

enter image description here

Generated New elements but by viewing source code of this page it gives,

    

    

    
       
        
                   
                        
                            
 Education Details
                        
                        

                            
                                Schools:
                            
                            
                                
                                
                        
                        
                            
                            

                            
                                Add Schools
                            
                        
                        
                            


                        
                        

                            
                                High School:
                            
                            
                                
                                
                        
                        

                            
                            
                            
                                Add High Schools
                            
                        
                        
                            



                        
                        
                            
                                College:
                            
                            
                                
                                
                        
                        
                            
                            
                            
                                Add College

I want my code to generate new id for each element to distinctly identify each element by its id.

How can i get id for each element?

expertCode · Accepted Answer

You are using .clone method, add thats copy everything... You can modify the id where are using that methor, something like this:

$(document).ready(function () {
    $('.studentprofileupdateBody a').click(function () {
        console.log('ok');
        var $tr = $(this).closest('tr').prev();
        var clone = $tr.clone().attr("id","new-id");
        $tr.after(clone);
    });
});

EDIT: To have dynamic id for each row('input' and 'tr'), you can do this:

$(document).ready(function () {
    var dynamicId, inputName, numberEachType;
    $('.studentprofileupdateBody a').click(function () {
        console.log('ok');
        var $tr = $(this).closest('tr').prev();
        numberEachType = $('table#tblEducation tr[name="'+$tr.attr('name')+'"]').length;
        dynamicId = $tr.attr('name') + numberEachType;
        var clone = $tr.clone().attr('id',dynamicId); //dynamic ID at 
        inputName = clone.find('input').attr('name');
        dynamicId = inputName.substring(0,inputName.length-1) + (numberEachType+1);
        clone.find('input').attr('id',dynamicId).attr('name',dynamicId).attr('title',dynamicId.toUpperCase()); //dynamic ID, Name and title at 
        $tr.after(clone);
    });
});

Try an example here http://jsfiddle.net/expertCode/NT4Zr/ and see the source code, if it's this what you want.

how can i get id/ generate id of dynamically generated elements in html using jquery?

Answers (1)

Related Questions