Append buttons to a list by using hover
<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>