title: Add remove with numbering indicated dynamically
body: <p>So currently I can easily add and remove multiple <code>textarea</code></p>
  
  <p>But what I'm trying to  do is to put numbering per specific <code>textarea</code></p>
  
  <p>Here's my textarea</p>
  
  <p>as you notice my default text area is <code>Step 1</code> </p>
  
  <p>But I wanted to do is when I clicked add it will show another textarea that says</p>
  
  <p><code>Step 2</code></p>
  
  <pre><code>  &lt;div class="optionBox"&gt;
                  &lt;div class="block"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;label for="exampleFormControlTextarea1"&gt;Step 1&lt;/label&gt;
                        &lt;textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
  
                       &lt;span class="remove"&gt;Remove&lt;/span&gt;
  
                  &lt;/div&gt;
                  &lt;div class="block"&gt; &lt;span class="add"&gt;Add Option&lt;/span&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>My Javascript</p>
  
  <pre><code> $('.add').click(function () {
  $('.block:last').before(' &lt;div class="block"&gt;&lt;div class="form-group"&gt;&lt;label for="exampleFormControlTextarea1"&gt;Step&lt;/label&gt;&lt;textarea class="form-control rounded-0" id="exampleFormControlTextarea1" rows="10"&gt;&lt;/textarea&gt;&lt;/div&gt;&lt;span class="remove"&gt;Remove&lt;/span&gt;&lt;/div&gt;');
  });
  </code></pre>
  
  <p>Here's the current output</p>
  
  <p><a href="https://i.stack.imgur.com/OOU7E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OOU7E.png" alt="enter image description here"></a></p>