Traversing DOM and inserting a value into <input/>

Question

It would be a lot of code to copy paste, so here is a fiddle

Focus on any input, buttons appear:

$('input').focus(function () {
        var $this = $(this);
       $this.closest('p').after($( ".specialCharactersWrap" ));

    });

then click, the button's text gets inserted into the input:

 $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $('.FillIn .FillInInput');
    input.val(input.val() + value);
    return false;
});

Problem: it inserts into ALL inputs. I need it to insert into one single above (which is focused). Tried traversing the DOM with closest(), but it doesn't work, it breaks, my failed attempt here ===> fiddle

how do I get the button text into one single input in focus? What am I doing wrong? Thank you.

Answer 1

Try this,

Demo

var $that = this // here my change
       $('input').focus(function () {
        var $this = $(this);
           $that = $(this);// here my change
       $this.closest('p').after($( ".specialCharactersWrap" ));
       // alert('test');

    });
     $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $that;// here my change
    input.val(input.val() + value);
    return false;
});

Answer 2

Try to change

var input = $('.FillIn .FillInInput');

to:

var input = $(this).closest('.specialCharactersWrap').prev().find('.FillInInput');

Updated Fiddle

Answer 3

try this,

$('input').focus(function () {
        var $this = $(this);
       $this.closest('p').after($( ".specialCharactersWrap" ));
        $('.FillInInput').closest('p').removeClass('focussed');
        $this.closest('p').addClass('focussed');
       // alert('test');

    });
     $('.specialCharactersWrap button').click(function() {
         var $this = $(this);
    var value = $(this).text();
    var input = $('.FillIn').find('.focussed').find('.FillInInput');

    input.val(input.val() + value);
    return false;
});

I have added one class on input focus and then use it on button click Or you can also user .prev()