How to show input button when hover over input text?

Question

What I want to happen

• When hover over Worksheet-Problem input text, I want .button-add to show up and the user be able to click on it. When the user hovers away from the Worksheet-Problem input text, I want .button-add to fade away.
• When hover over .button-bullet , I want .button-bullet to disappear and .button-remove to fade in its place

I feel like this should be simple enough. I might be using the incorrect jQuery functions.

What is actually happening

.button-add keeps blinking and coordination between .button-remove fadingIn and .button-bullet disappearing is a fail.

Add Button Glitch

Remove Button Glitch

My code

I set the display of the .button-add and .button-remove to none . And then I toggled their display , as well as .button-bullet 's display , using fadeIn() and fadeOut() .

HTML

.button-add, .button-remove{
    display: none;
}

jQuery

$("input[type='text'][name='Worksheet-Problem']").focus(function(){
        $(".button-add").fadeIn(300);  
    })
    $("input[type='text'][name='Worksheet-Problem']").hover(function(){
        $(".button-add").fadeIn(300);
    })
    $("input[type='text'][name='Worksheet-Problem']").mouseout(function(){
        $(".button-add").fadeOut(300);
    })
    $(".button-bullet").hover(function(){
        $(this).hide();
        $(".button-remove").fadeIn(300);
    })
    $(".button-remove").mouseout(function(){
        $(this).fadeOut(300);
        $(".button-bullet").fadeIn(300);
    })

JSFiddle

Answer 1

Try this:

$(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(){
        console.log("Add-Button pressed");
    })
    $(".button-remove").click(function(){
        console.log("Remove-Button pressed");
    })
})