Blogger - jQuery no output?

Question

My code is to show elements with checked class when a tag is clicked.
When I click ☐ tag-name in live page, nothing happens.
When I click the one in jsfiddle, it works fine.
I don't know what is happening and wrong with Blogger.
Can someone help me please? Thanks.

Blogger live page, jsfiddle:

$('div.label').on('click', function(){
  if ( $(this).text().match("☐") ) {
    $('div.dhptable table.hptable').show();
    $('div.label').each(function(){
      $(this).text( $(this).text().replace("☑", "☐") );
    });
    $(this).text( $(this).text().replace("☐", "☑") );
    $('table.hptable:not(.'+$(this).attr("id")+')').hide('slow');
  } else {
    $('div.dhptable table.hptable').show('slow');
    $(this).text( $(this).text().replace("☑", "☐") );
  }
})

body {
  width: 650px;
}
.hptable {
   text-align:center;
   vertical-align: middle;
   margin: 12px;
   display: inline-block;
}
.hptable td:hover {
    background-color: #CEE9FF;
}
.cell {
    vertical-align: middle;
    width: 176px;
    max-width: 177px;
    /*height: 176px;
    max-height: 177px;*/
    text-align: center;
    border: 1px solid #87CEEB !important;
    background-color: #D9F9FF;
    font-size: large;
    font-weight: bold;
}
.hptable img {
    vertical-align:middle;
    max-width: 175px;
    max-height: 175px;
}
div.muri.b textarea.muri {
  width: 60px;
  height: 30px;
}
div.lang {
    display: inline-block;
    border: 1px solid #D1D1FF;
    padding: 1px;
    border-radius: 2px;
}
.label {
    display:inline-block;
    background: #84E3FF;
    position: relative;
}
.label:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 11px solid white;
    border-left: 11px solid #84E3FF;
    width: 0;
}
.label:after {
    content: '';
    position: absolute;
    bottom: 0; right: 0;
    border-bottom: 11px solid white;
    border-left: 11px solid #84E3FF;
    width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr /><b>TAG</b>：<div id='windows' class='label'>&nbsp;☐ Windows　</div>　<div id='jquery' class='label'>&nbsp;☐ jQuery　</div>　<div id='software' class='label'>&nbsp;☐ Software　</div>　<div id='blogger' class='label'>&nbsp;☐ Blogger　</div>
<br />
<hr />
<div class='dhptable' style='text-align: left; vertical-align: middle;'>
<table class="hptable exc windows">
<tr><td class='null cell'>TAG: windows</td></tr></table>
<table class="hptable exc jquery">
<tr><td class='null cell'>TAG: jquery</td></tr></table>
<table class="hptable exc software">
<tr><td class='null cell'>TAG: software</td></tr></table>
<table class="hptable exc software">
<tr><td class='null cell'>TAG: software</td></tr></table>
<table class="hptable exc blogger">
<tr><td class='null cell'>TAG: blogger</td></tr></table>
<table class="hptable exc">
<tr><td class='null cell'>
</td></tr></table>
</div>

Answer 1

It seems that you dont wait for the DOM to load on the site. You could try to wrap the code around the ready event.

$(function() {
    $('div.label').on('click', function() {
        if ($(this).text().match("☐")) {
            $('div.dhptable table.hptable').show();
            $('div.label').each(function() {
                $(this).text($(this).text().replace("☑", "☐"));
            });
            $(this).text($(this).text().replace("☐", "☑"));
            $('table.hptable:not(.' + $(this).attr("id") + ')').hide('slow');
        } else {
            $('div.dhptable table.hptable').show('slow');
            $(this).text($(this).text().replace("☑", "☐"));
        }
    })
});