title: jQuery functions not working after click button?
body: <h2>What I want to happen</h2>
  
  <ul>
  <li>When press the add button, a row will be added underneath the add button's row</li>
  <li>When press the remove button, that row will be removed.</li>
  <li>When hover or click on a certain input text, an add button will show up next to it. 
  
  <ul>
  <li>When mouse is not hovering over the input text or the input text is not selected, then the add button should disappear.</li>
  </ul></li>
  <li>When hover over a certain bullet, a remove button will show up in place of the bullet. 
  
  <ul>
  <li>When mouse moves away from remove button, it will revert back to a bullet.</li>
  </ul></li>
  </ul>
  
  <p>I suspect some of my problems are occurring b/c I'm putting all my functions in <code>$(document).ready()</code>. If someone could type out the jQuery code that I should be using I would be really grateful!</p>
  
  <h2>What is happening</h2>
  
  <p><em>The Add Button</em>
  <a href="https://i.stack.imgur.com/sZBsU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sZBsU.gif" alt="enter image description here"></a></p>
  
  <p>Only the first add button works.</p>
  
  <p><em>The Remove button</em>
  <a href="https://i.stack.imgur.com/mEgeo.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mEgeo.gif" alt="enter image description here"></a>
  The other added rows' remove buttons only show up when hover over the first bullet.</p>
  
  <p><a href="https://i.stack.imgur.com/dkx4N.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dkx4N.gif" alt="enter image description here"></a>
  The remove button only works once. After remove one row, the remove button &amp; add button lose their functionality. The remove and add button also don't disappear as they should.</p>
  
  <h2>My code</h2>
  
  <p><em>HMTL</em></p>
  
  <p>This is the row I want to add</p>
  
  <pre><code>&lt;div class="row"&gt;
                  &lt;div class="col-lg-7"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="input-group input-group-lg"&gt;
                              &lt;div class="input-group-btn"&gt; 
                                  &lt;button type="button" class="btn btn-default button-remove" aria-label="Remove"&gt;
                                      &lt;span class="glyphicon glyphicon-minus-sign" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;/button&gt;
                                  &lt;button type="button" class="btn btn-default button-bullet" aria-label="Bullet"&gt;
                                      &lt;span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;/button&gt;
                              &lt;/div&gt; 
                              &lt;input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here"&gt; 
                              &lt;div class="input-group-btn"&gt;  
                                  &lt;button type="button" class="btn btn-default button-add" aria-label="Add"&gt;
                                      &lt;span class="glyphicon glyphicon-plus-sign" aria-hidden="true"&gt;&lt;/span&gt;
                                  &lt;/button&gt; 
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><em>jQuery</em></p>
  
  <p>These are the functions I'm using to animate the buttons and add/remove rows.</p>
  
  <pre><code>$(document).ready(function(){
      $("input[type='text'][name='Worksheet-Problem']").closest('.row').hover(function()      {
          $(".button-add").fadeToggle(300);
      })
      $(".button-bullet").closest('.input-group-btn').hover(function(){
          $('.button-bullet').toggle();
          $(".button-remove").toggle();
      })
  
      $(".button-add").click(function(){
          var $row = $(this).closest('.row');
          var $wsProbRow = $row.clone();
          $wsProbRow.insertAfter($row);
          console.log("Add-Button pressed");
      })
      $(".button-remove").click(function(){
          $(this).closest('.row').remove();
          console.log("Remove-Button pressed");
      })
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/14ongm/d5dedcLj/3/" rel="nofollow noreferrer">JSFiddle</a></p>