title: How to use jquery 'append' to add div after an 'focus'ed input, if there are more than one input with same class?
body: <p>I have a form with inputs:</p>
  
  <pre><code> &lt;form action="xyz" name="form" id="fc" method="GET" style="background:none;display:block"&gt;
   &lt;div class="a" id="a"&gt; 
   &lt;div class="b"&gt; 
   &lt;div class="c" id="c"&gt; 
   &lt;input class="input" type="text" name="name"&gt;
   &lt;/div&gt;
   &lt;div class="c"&gt; 
   &lt;input class="input" type="text" name="email"&gt;
   &lt;/div&gt;
   &lt;div class="c"&gt; 
   &lt;input class="input" type="text" name="sub"&gt;
   &lt;/div&gt;
   &lt;div class="c"&gt; 
   &lt;input class="input" type="text" name="web"&gt;
   &lt;/div&gt;
   &lt;/div&gt;
   &lt;input type="submit" name="submit" id="su" value=""&gt; 
   &lt;/div&gt;  
   &lt;/form&gt; 
  </code></pre>
  
  <p>no, I want that when I focused on a input, than </p>
  
  <pre><code> var appender = '&lt;div class="nxt"&gt;&lt;div class="btn" name="button" id="btn"&gt;A&lt;/div&gt;&lt;/div&gt;';
  </code></pre>
  
  <p>added <strong>after the div of this input</strong>.</p>
  
  <pre><code>||---------------------|A| [ &lt;div&gt;||----------|&lt;/div&gt; |a| ]
  |----------------------|
  |----------------------|
  |----------------------|
  
  |----------------------|
  ||---------------------|A|
  |----------------------|
  |----------------------|
  
  |----------------------|
  |----------------------|
  ||---------------------|A|
  |----------------------|
  
  |----------------------|
  |----------------------|
  |----------------------|
  ||---------------------|A|
  </code></pre>
  
  <p>currently I'm using this code :</p>
  
  <pre><code> var any = {
   init: function(){
   var btn = $("#btn");
   var input = $('input');
   var appender = '&lt;div class="nxt"&gt;&lt;div class="btn" name="button" id="btn"&gt;A&lt;/div&gt;&lt;/div&gt;';
  input.focus(function(){
      $(this).parent().parent().append(appender);
  });
  input.blur(function(){
      if(input.val().length == 0){
          $(this).parent().parent().find(".nxt").remove();
      }else{
          $(this).parent().parent().find(".nxt").css("display","block");
      }
  });
  
  btn.live("click",function(){
      input.val('');  
      btn.css("display","none");
  }); 
   }
   }
   $(document).ready(any.init);
  </code></pre>
  
  <p>but this code will only append this 'appender' to the first input.</p>
  
  <p>Can anyone provide me a good solution of it... </p>