title: Add/remove items dynamically with jQuery and HTML
body: <p>This is my HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;input type="button" id="add" value="New Thing"&gt;
      &lt;div id="addNew_1" class="new"&gt;
          &lt;select name="select_1"&gt;
              &lt;div id="options"&gt;
                  &lt;option value="nothing"&gt;Nothing&lt;/option&gt;
                  &lt;option value="snothing"&gt;Second Nothing&lt;/option&gt;
              &lt;/div&gt;
          &lt;/select&gt;
          &lt;input type="text" id="input_1" value="Here goes your stuff"&gt;
          &lt;input type="button" id="newField_1" value="New Field For Stuff"&gt;
          &lt;br&gt;
          &lt;br&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is my jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      var select = 1;
      var divid = 1;
      var options = $('#options');
      $('#newField_' + divid).on('click', function () {
          select++;
          var content = '&lt;select name=select_' + select + '&gt;' + options + '&lt;/select&gt;&lt;input type="text" name="input_' + select + '" value="Here goes your stuff"&gt;&lt;input type="button" class="remove"  id="remove_' + select + '"  value="Remove this field!"&gt;&lt;br&gt;&lt;br&gt;';
          $('#addNew_' + divid).append(content);
          $('.remove').on('click', remThis);
      });
  
      function remthis() {
          $(this).parents('div').remove();
      }
      $('#add').on('click', function () {
          divid++;
          select++;
          var thing = '&lt;div id="addNew' + divid + '" class="new"&gt;&lt;select name=select_' + select + '&gt;' + options + '&lt;/select&gt;&lt;input type="text" name="input_' + select + '" value="Here goes your stuff"&gt;&lt;input type="button" id="newField_' + divid + '" value="New Field For Stuff"&gt;&lt;/div&gt;&lt;br&gt;&lt;br&gt;';
          $('#container').append(thing);
      });
  
  });
  </code></pre>
  
  <p>This script's purpose is to add one select and one input fields in the parent div by clicking "Add New Field For Stuff" and add a new div with the same content by clicking the "New Thing" button. 
  Where I'm stuck:</p>
  
  <ul>
  <li>I want to dynamically add/remove every field in every generated div. I've managed to add fields, but it adds only when it displays the div
  from html. If I generate another one, I can't do that anymore. I
  don't get it! </li>
  <li>I want to dynamically add/remove divs. Again, I've
  managed to add new divs, but I have no idea about how to dynamically
  delete a div.</li>
  <li>I want to add a title on every div (for example Div #1,
  Div#2...etc) so when I delete the second div for example, the user
  can still see Div #1, Div#2, Div#3, etc... </li>
  <li>Another issue is that I
  can't add options on every generated . I needed to add the
  options this way because I will take values for every div with php,
  if I give the same name to every , I can't post this in a
  form. So I need to have a different name on every input type and
  select I generate.</li>
  </ul>
  
  <p>I'm a newbie, 3 days ago I had no idea about jQuery.</p>