Change content of classes with the same name nested is divs with the same class
<p>I have a div with a label and some other stuff. The label has as content: "Step 1".</p>

<pre><code>&lt;div class="methodContainer"&gt;
    &lt;label class="steps"&gt;Step 1:&lt;/label&gt;
    &lt;textarea name="step" class="stepMethod glowingBorder"&gt;&lt;/textarea&gt;
    &lt;div class="removeMethod" title="Click to remove this ingredient"&gt;                                  
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>If you click on another div on the page I use jQuery to add exactly the same copy as the code up here and place it behind this code.</p>

<pre><code>$('.plusMethod').click( function() {
    $('&lt;div class="methodContainer"&gt;&lt;label class="steps"&gt;Step 1:&lt;/label&gt;&lt;textarea name="step" class="stepMethod glowingBorder"&gt;&lt;/textarea&gt;&lt;div class="removeMethod" title="Click to remove this ingredient"&gt;&lt;/div&gt;&lt;/div&gt;').appendTo('.partMethod');
}
</code></pre>

<p>This is repeatable as many times as the user wants.</p>

<p>But this way all the labels with class steps will have the content: "Step 1". I want the second one to have "Step 2", third one "Step 3" and so on. How do I do this?</p>

<p>!!!!EDIT!!!!<br>
Thanks for the quick answers! But I forgot to say that I also have a possibility to remove a part. I do that </p>

<pre><code>$('.removeMethod').live('click', function() {
    $(this).parents('.methodContainer').remove();
}
</code></pre>

<p>So if I use the answer of Arun P Johny which works:) Each piece of content added will be labeled with Step 1, 2, 3, and so on. But when the user removes for example the second step, the steps will now be like: 1,3,4 and so on. How do I fix that?</p>
