title: If checkbox selected append his textValue into another span
body: <p>I have a dropdown checkbox for which I want to <code>get</code> checkbox value and <code>append</code> a <code>&lt;span&gt;</code> when checkbox is checked after <code>&lt;input type="text" class="form-control"&gt;</code>. When checkbox is unchecked I want to remove appended span.</p>
  
  <p>this is what I've tried:</p>
  
  <pre><code>$ ('.chkb:checkbox').click(function(){
    if ($(".chkb").prop('checked') == true){
       var textName = $('.chkb:checked').next( '.txt' ).text();
  
       $( ".input-append" ).append('&lt;span class="input-group-addon vss"&gt; ' + textName +'&lt;/span&gt;');
      //alert(textName);
  }
     else{
      $( ".vss" ).remove();
  }
  })
  </code></pre>
  
  <p>It is not working so great my script because if I select more checkbox options the append is for every checked element once again and remove only when I uncheck last checkbox.</p>
  
  <p><a href="http://jsfiddle.net/D2RLR/5729/" rel="nofollow"><strong>Here is a small fiddle example:</strong></a></p>