title: Append buttons to a list by using hover
body: <p>I have a ul list of elements</p>
  
  <pre><code>&lt;ul id="list"&gt;
   &lt;/ul&gt;
  </code></pre>
  
  <p>and two text fields and submit button in the html</p>
  
  <pre><code>Name: &lt;input type="text" id='name'/&gt;&lt;br/&gt;
  Surname: &lt;input type="text" id='surname'/&gt;&lt;br/&gt;
  &lt;button id="submit"&gt;Submit&lt;/button&gt;
  </code></pre>
  
  <p>By clicking on the submit button I am appending elements from this field to a list</p>
  
  <pre><code>$('#submit').click(function(){
                      if($('#name').val()!="" &amp;&amp; $('#surname').val()!="") {
                      $('#list').append("&lt;li&gt;" + "Name: " + $('#name').val() + " &lt;br/&gt;Surname: " + $('#surname').val() + "&lt;/li&gt;");
  
                      $('#name').val("");
                      $('#surname').val("");
  
                  }
              });
  </code></pre>
  
  <p><strong>THIS IS THE PROBLEM:</strong>
  I want by using hover to append two buttons on a particular li from this list, when I am on that li elements buttons to show, and when i am off buttons to hide. Here is my code:</p>
  
  <pre><code> $("ul").find("li").hover(
            function() {
            $('li').append('&lt;button id="but1"&gt;Button1&lt;/button&gt;' 
            + '&lt;button id="but2"&gt;Button1&lt;/button&gt;');}, 
             function(){
                  $('#but1').remove();
                  $('#but2').remove();
        });
  </code></pre>
  
  <p>And this is another try but it appends the buttons at the and of the list not in a particular li from ul list</p>
  
  <pre><code>$('#list').each(function(){
                      console.log($(this));
                          $(this).hover(
                            function() {
                              $(this).append('&lt;button id="but1"&gt;Button1&lt;/button&gt;' + '&lt;button id="but2"&gt;Button1&lt;/button&gt;');
                            }, 
                            function(){
                              $('#but1').remove();
                               $('#but2').remove();
                            }
  
                            );
  
  
                      });
  </code></pre>