tagging functionality using jQuery

gistfile1.html

<!-- The hidden div -->
<div class="hiddenUL">
</div>

<!-- This is a section of list items. There can be multiple unordered lists as long as the class is the same -->
<ul class="item_box">
  <li class="ViPR SDK Ruby">
    <a href="https://github.com/nctiggy/Vipruby">
      <div class="item_bg" style="background: url(images/items/vipruby.png) no-repeat center center; background-size: cover;">
        <h2>ViPRuby</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
  <li class="ViPR SDK Java">
    <a href="https://github.com/emcvipr/dataservices-sdk-java">
      <div class="item_bg" style="background: url(images/items/javavipr.png) no-repeat center center;background-size: cover;">
        <h2>ViPR Java SDK</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
  <li class="ViPR SDK Python">
    <a href="https://github.com/emcvipr/dataservices-sdk-python">
      <div class="item_bg" style="background: url(images/items/pythonvipr.png) no-repeat center center; background-size: cover;">
        <h2>ViPR Python SDK</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
</ul>

<!-- my second unordered list -->
<ul class="item_box">
  <li class="VMAX Docker DevHigh5">
    <a href="https://github.com/seancummins/dockerized_symcli">
      <div class="item_bg" style="background: url(images/items/dockerized_symcli.jpg) no-repeat center center; background-size: cover;">
        <h2>Dockerized Symcli</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
  <li class="Python VMAX DevHigh5">
    <a href="https://github.com/seancummins/fast_report">
      <div class="item_bg" style="background: url(images/items/fast_report.jpg) no-repeat center center; background-size: cover;">
        <h2>Fast Report</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
  <li class="VNX OpenStack">
    <a href="https://github.com/emc-openstack/vnx-faulty-device-cleanup">
      <div class="item_bg" style="background: url(images/items/openstack-vnx.png) no-repeat center center; background-size: cover;">
        <h2>VNX Device Cleanup</h2>
        <div class="hover_image"></div>
      </div>
    </a>
  </li>
</ul>

<!--- Some buttons -->
<a href="#" class="btn">VMAX</a>
<a href="#" class="btn">XtremIO</a>
<a href="#" class="btn">ViPR</a>
<a href="#" class="btn">ScaleIO</a>
<a href="#" class="btn">VNX</a>

<a href="#">
  <div class="clearBtn">clear tag</div>
</a>

the_jQ.js

$( document ).ready(function() {
  function tagButtons(){
    $( ".btn" ).click(function(event) {
      event.preventDefault();
      var classSearch = $(this).text();

      $(".hiddenUL").children().remove();

      var html = '<h3>' + classSearch + '</h3>';
      html += '<ul class="item_box"></ul>';
      $(".hiddenUL").append(html);

      $( ".item_box li" ).each(function() {
        if ( $( this ).hasClass(classSearch) ) {
          $(window).scrollTop(525);
          $(this).clone().appendTo( $(".hiddenUL ul") );
        } 
      });
    });  
  }
  function clearTagButton(){
    $( ".clearBtn" ).click(function(event) {
      event.preventDefault();
      $(".hiddenUL").children().remove();
    });
  }

  tagButtons();
  clearTagButton();

});