title: Add / Remove <li> item to list when Clicking a button - Twitter Bootstrap
body: <p>I am currently trying to create options for conditional rules in my project. I am trying to set up a smart filtering system (similar to email) where the user can choose different options in the dropdowns and that determines how the folder is populated dynamically. </p>
  
  <p>I have seen many programs with this conditional functionality and I would like to re-create that in my Twitter Bootstrap project but I am unable to figure out how to get the Add(+) and Minus (-) functionality working on the frontend.</p>
  
  <ol>
  <li><p>I am wondering if there is a plugin that already exists that does this type of functionality?</p></li>
  <li><p>If not I am hoping to get some help to do this with JavaScript / jQuery implementation.</p></li>
  </ol>
  
  <p>I have put the base HTML and CSS here so you can see what I am trying to do</p>
  
  <p><strong>DEMO</strong>: <a href="http://jsfiddle.net/y7CwE/1/" rel="nofollow noreferrer">http://jsfiddle.net/y7CwE/1/</a></p>
  
  <p>Note: By Default there is always 1 row (and that first row does not have a minus to remove it, only subsequent rows have the menus function)</p>
  
  <pre><code>&lt;p&gt;Please Create the following rules for your group&lt;/p&gt;
  &lt;ul id="conditionRow-1"&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;Client&lt;/option&gt;
          &lt;option&gt;Resource&lt;/option&gt;
          &lt;option&gt;Site&lt;/option&gt;
          &lt;option&gt;Options&lt;/option&gt;
          &lt;option&gt;Meals&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;is&lt;/option&gt;
          &lt;option&gt;is not&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;X&lt;/option&gt;
          &lt;option&gt;y&lt;/option&gt;
          &lt;option&gt;Z&lt;/option&gt;
          &lt;option&gt;A&lt;/option&gt;
          &lt;option&gt;B&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;a href="#" data-toggle="tooltip" title="Add Another Rule"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/ul&gt;
  
  &lt;ul id="conditionRow-2"&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;select&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
      &lt;/select&gt;
  &lt;/li&gt;
  &lt;a href="#" data-toggle="tooltip" title="Add Another Rule"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a href="#" data-toggle="tooltip" title="Remove Rule"&gt;&lt;i class="icon-minus"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/ul&gt;
  </code></pre>