jQuery appending multiple elements not just (this)

Ok this may seem weird what i'm requesting to do (because i know its not the best way开发者_开发技巧 to do it)

This is my jquery code:

$('.save_ref').live('click',function(){ 
                var project_ref_input=$('.project_ref_input').val();
                $('.project_ref').append(project_ref_input);
            });

I have a table and i'm adding rows to it dynamically by .append() then i have an input at the end of each row called project_ref_input and a save button. What i need to do is when the user inputs something and presses save, for the input text to be appended to a p tag called .project_ref. However i have multiple rows in the new table so when i'm putting values into the inputs its appending them all the same!?

This is how i make the table:

$('#items').append('<tr class="tableRow"><td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a><td class="om_part_no">' + omPartNo + '</td><td>' + supPartNo + '</td><td>' + cat + '</td><td class="description">' + desc + '</td><td>' + manuf + '</td><td>' + list + '</td><td>' + disc + '</td><td class="price_each_nett price">' + priceEach + '</td><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></tr>');

You are using global selectors, to select your elements.

$('.project_ref_input') - get all elements with class "project_ref_input"

You need to be more specific about which input you want to process.

If you input is directly before "Save" button this might work:

        $('.save_ref').live('click',function(){ 
            var project_ref_input=$(this).prevAll().find('.project_ref_input').val();
            $('.project_ref').append(project_ref_input);
        });

$('.project_ref_input').live('change',function(){ 
                    var project_ref_input=$(this).val();
                    $(this).next().append(project_ref_input);
                });

This worked in the end!

Thanks for help Silver Light