Javascript-форум - Подсветка одинаковых элементов в таблице

Всем привет!

Нужно сделать подсветку и выделение по клику одинаковых строк в таблице.

Нашел пример, который прям то, что мне надо: http://jsfiddle.net/HEmM4/

Внедрил в таблицу - не работает. Попробовал на чистом файле просто воспроизвести этот пример - не получается. JQuery работает, тест проходит.

Что я делаю не так? Вот мой файл. Вроде все то же самое на фидле рабоает, а у меня нет.... хостинг мастерхост.
[spoiler]

<html>
<body>
<head>


<style type="text/css">
.clicked, .hovered {
    font-weight: bold;
}
.gr {
    cursor: pointer;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(".gr").mouseover(function(){
    var group = $(this).data('group');
    $('.'+group).addClass('hovered');
});
$(".gr").mouseleave(function(){
    var group = $(this).data('group');
    $('.'+group).removeClass('hovered');
})
$(".gr").click(function(){
    var group = $(this).data('group');
    if($(this).hasClass('clicked')){
        $('.'+group).removeClass('clicked');
    }else{
        $('.'+group).addClass('clicked');
    }
})
</script>

<!-- Проверка работы jQuery -->
<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<br/>This text append by jQuery');
});
</script>

</head>

<div style="overflow: hidden;">
  <div style="float: left">
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group2" data-group="group2">group2</div>
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group2" data-group="group2">group2</div>
    <div class="gr group3" data-group="group3">group3</div>
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group3" data-group="group3">group3</div>
    <div class="gr group2" data-group="group2">group2</div>
  </div>
</div>


</body>
</html>

[/spoiler]