title: Traversing DOM and inserting a value into <input/>
body: <p>It would be a lot of code to copy paste, so here is a <a href="http://jsfiddle.net/andreyka88/5WQgc/19/" rel="nofollow">fiddle</a></p>
  
  <p>Focus on any input, buttons appear:</p>
  
  <pre><code>$('input').focus(function () {
          var $this = $(this);
         $this.closest('p').after($( ".specialCharactersWrap" ));
  
      });
  </code></pre>
  
  <p>then click, the button's text gets inserted into the input:</p>
  
  <pre><code> $('.specialCharactersWrap button').click(function() {
           var $this = $(this);
      var value = $(this).text();
      var input = $('.FillIn .FillInInput');
      input.val(input.val() + value);
      return false;
  });
  </code></pre>
  
  <p>Problem: it inserts into <strong>ALL</strong> inputs. I need it to insert into <strong>one single</strong>  above (which is focused). Tried traversing the DOM with <code>closest()</code>, but it doesn't work, it breaks, my failed attempt here ===> <a href="http://jsfiddle.net/andreyka88/5WQgc/18/" rel="nofollow">fiddle</a> </p>
  
  <p>how do I get the button text into one single input in focus? What am I doing wrong?
  Thank you.</p>