jquery - Change content of classes with the same name nested is divs with the same class -

i have div label , other stuff. label has content: "step 1".

<div class="methodcontainer">     <label class="steps">step 1:</label>     <textarea name="step" class="stepmethod glowingborder"></textarea>     <div class="removemethod" title="click remove ingredient">                                       </div> </div> 

if click on div on page use jquery add same copy code here , place behind code.

$('.plusmethod').click( function() {     $('<div class="methodcontainer"><label class="steps">step 1:</label><textarea name="step" class="stepmethod glowingborder"></textarea><div class="removemethod" title="click remove ingredient"></div></div>').appendto('.partmethod'); } 

this repeatable many times user wants.

but way labels class steps have content: "step 1". want second 1 have "step 2", third 1 "step 3" , on. how do this?

!!!!edit!!!!
quick answers! forgot have possibility remove part.

$('.removemethod').live('click', function() {     $(this).parents('.methodcontainer').remove(); } 

so if use answer of arun p johny works:) each piece of content added labeled step 1, 2, 3, , on. when user removes example second step, steps like: 1,3,4 , on. how fix that?

try

$('.plusmethod').click( function() {     $('<div class="methodcontainer"><label class="steps">step ' + ($('.methodcontainer').length + 1)  + ':</label><textarea name="step" class="stepmethod glowingborder"></textarea><div class="removemethod" title="click remove ingredient"></div></div>').appendto('.partmethod'); } 

edit: reindex items after remove

$('.removemethod').live('click', function() {     $(this).parents('.methodcontainer').remove();      $('.partmethod').children('.methodcontainer').each(function(index, item){         $(this).find('.steps').html('step ' + (index + 1) + ':')     }) }