title: Removable labels within text box
body: <p>I am trying to replicate the following behaviour whereby a user enters text into a text box, and on clicking out the text box, the text entered is turned into a removable label (also very similar to adding a tag in a question on SO) -</p>
  
  <p><img src="https://i.stack.imgur.com/gDPGs.jpg" alt="Removable label"></p>
  
  <p>I am able to create a watermark in a text box like so - </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>input.watermark {
      color: #D3D3D3; font-weight: 400;
  }
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>(document).ready(function() {
  
      var watermark = ''; // watermark value
  
      $('#myID').val(watermark).addClass('watermark');
  
      $('#myID').blur(function(){
          if ($(this).val().length == 0){
              $(this).val(watermark).addClass('watermark');
          }
      });
  
      $('#input_fname').focus(function(){
          if ($(this).val() == watermark){
              $(this).val('').removeClass('watermark');
          }
      });
  });
  </code></pre>
  
  <p>How can I achieve this?</p>