title: how to add and remove div using jquery
body: <p>I'm making a scenario where user will be able to add a new row with "Remove" option by clicking "Add" button. If they click "Remove" button, the entire row will be deleted. I've put script for it. But, it's not working perfectly. Kindly, take a look on my fiddle: <a href="http://jsfiddle.net/learner73/gS8u2/" rel="noreferrer">http://jsfiddle.net/learner73/gS8u2/</a></p>
  
  <p>My problem is: </p>
  
  <p>(1) If user click "Add" button, a new row will be added. That's good. But, it's gone below the "Add" button. I want, the new row will be added above the "Add" button, I mean "Add" button should be always at the bottom.</p>
  
  <p>(2) At my code, if user click "Remove" button on the previously created row, the entire row will be deleted. That's good. But, when they click "Remove" button on dynamically created row, nothing will happened!</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="optionBox"&gt;
      &lt;div class="block"&gt;
          &lt;input type="text" /&gt; &lt;span class="remove"&gt;Remove Option&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="block"&gt;
          &lt;input type="text" /&gt; &lt;span class="remove"&gt;Remove Option&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>jQuery:</p>
  
  <pre><code>$('.add').click(function() {
      $('.optionBox').append('&lt;input type="text" /&gt;&lt;span class="remove"&gt;Remove Option&lt;/span&gt;');
  });
  
  $('.remove').click(function() {
      $(this).parent('div').remove();
  });
  </code></pre>