title: Adding "Clear Field" buttons to Bootstrap 3 inputs using jQuery + CSS class
body: <p>How can I add a "Clear field" button to multiple Bootstrap 3 input fields just using jQuery and a CSS class?</p>
  
  <p>I've found solutions that can add a 'clear field' button to a field with a particular ID, but nothing so far that can do it by class. I've got a form with a lot of fields and I'd rather not have to repeat my code over again for each field.</p>
  
  <p><a href="http://www.bootply.com/130362" rel="nofollow">I've tried this so far (Bootply),</a> but I can't figure out how to get jQuery to clear just the one field and toggle the one icon, not all of them.</p>
  
  <p>//JS</p>
  
  <pre><code>        $(document).ready(function(){
              $(".searchinput").keyup(function(){
                  $(".searchclear").toggle(Boolean($(this).val()));
              });
              $(".searchclear").toggle(Boolean($(".searchinput").val()));
              $(".searchclear").click(function(){
                  $(".searchinput").val('').focus();
                  $(this).hide();
              });
          });
  </code></pre>
  
  <p>//HTML</p>
  
  <pre><code>       &lt;div class="btn-group"&gt;
           &lt;input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value=""&gt;
           &lt;span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"&gt;           &lt;/span&gt;
         &lt;/div&gt;
  
         &lt;div class="btn-group"&gt;
           &lt;input id="searchinput" type="search" class="form-control searchinput" placeholder="type something..." value=""&gt;
           &lt;span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"&gt;&lt;/span&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>//CSS</p>
  
  <pre><code>.searchinput {
      width: 200px;
  }
  
  .searchclear {
      position:absolute;
      right:5px;
      top:0;
      bottom:0;
      height:14px;
      margin:auto;
      font-size:14px;
      cursor:pointer;
      color:#ccc;
  }
  </code></pre>