title: Add Tags to Textarea by click on Tags respectively
body: <p>I am working on this <strong>small Js Module</strong> in which I have a list of Tags:</p>
  
  <p>E.g : Username , Email etc</p>
  
  <p>When I click on <strong>Username</strong> its should type in [USERNAME] automatically in textarea. Which I have tried and working fine.</p>
  
  <p>Here is the <a href="http://jsfiddle.net/kyfa2/1/" rel="nofollow">Fiddle</a></p>
  
  <p>Now the problem is when I add tag , it always add at the end of the text.</p>
  
  <p>Look at this string: Hi [USERNAME] , this is your ['EMAIL'].</p>
  
  <p>Now if I forgot to select [USERNAME] and I typed : <strong>Hi  , this is your ['EMAIL'].</strong></p>
  
  <p>So now if I click after Hi and then I choose <strong>Username Tag</strong>, it will add the tag at the End instead of adding it after "Hi"</p>
  
  <p>How can I fix this thing ?</p>
  
  <p><strong>Here is my Code:</strong></p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('.tags').click(function (){
      var currentTag = $(this).attr("id");
      var currentTxt = $('#description').val();
  
      $('#description').val(currentTxt+currentTag);   
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table width="300" border="0" cellspacing="8" cellpadding="0"&gt;
    &lt;tr&gt;
      &lt;td&gt;Tags: &lt;a href="javascript:void(0);" class="tags" id="[USERNAME]"&gt;USERNAME&lt;/a&gt; , &lt;a href="javascript:void(0);" class="tags" id="[EMAIL]"&gt;EMAIL&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;
      &lt;textarea name="description" id="description" cols="45" rows="5"&gt;&lt;/textarea&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>You can also check my DEMO here: <a href="http://jsfiddle.net/kyfa2/1/" rel="nofollow">http://jsfiddle.net/kyfa2/1/</a></p>
  
  <p><strong>In very simple words:</strong> Type this sentence in textarea:</p>
  
  <pre><code>              Hi , this is your Email
  </code></pre>
  
  <p>Now click after Hi and then click on Username Tag.</p>
  
  <p>I want it like this:</p>
  
  <pre><code>Hi [USERNAME] , this is your Email.
  </code></pre>