اشکالی در اجرای اسکریپت Star Button

با سلام
من زمانی که اسکریپت مربوط به یک Star Button را در یک div ساده اجرا می کنم همه چیز ok هست ولی وقتی اون را داخل یک tr در جدول می گذارم اجرا نمیشه!!!
کد من بصورت زیر است:

@extends('layouts.adminLayouts')
@section('content')
    <h4>Click le star to add to favourites</h4>
    <div class="click">
        <span id="Sp" class="fa fa-star-o"></span>
        <div class="ring"></div>
        <div class="ring2"></div>
        <p class="info">این ردیف منخب گردید</p>
    </div>
<style>
    @import url(//fonts.googleapis.com/css?family=Open+Sans:600,400&subset=latin,cyrillic);

    /*h4 {*/
        /*text-align: center;*/
        /*font-family: 'Open Sans', sans-serif;*/
        /*font-weight: 400;*/
        /*opacity: 0.7;*/
    /*}*/

    .click {
        font-size: 33px;
        color: rgba(0,0,0,.5);
        width: 38px;
        height: 38px;
        margin: 0 auto;
        margin-top: 20px;
        position: relative;
        cursor: pointer;
    }

    body {
        padding-top: 20px;
    }

    .click #Sp {
        margin-left: 4px;
        margin-top: 3px;
        z-index: 999;
        position: absolute;
    }

    #Sp:hover {
        opacity: 0.8;
    }

    #Sp:active {
        transform: scale(0.93,0.93) translateY(2px)
    }

    .ring, .ring2 {
        opacity: 0;
        background: grey;
        width: 1px;
        height: 1px;
        position: absolute;
        top: 19px;
        left: 18px;
        border-radius: 50%;
        cursor: pointer;
    }

    .active #Sp, .active-2 #Sp {
        color: #F5CC27 !important;
    }

    .active-2 .ring {
        width: 58px !important;
        height: 58px !important;
        top: -10px !important;
        left: -10px !important;
        position: absolute;
        border-radius: 50%;
        opacity: 1 !important;
    }

    .active-2 .ring {
        background: #F5CC27 !important;
    }

    .active-2 .ring2 {
        background: #fff !important;
    }

    .active-3 .ring2 {
        width: 60px !important;
        height: 60px !important;
        top: -11px !important;
        left: -11px !important;
        position: absolute;
        border-radius: 50%;
        opacity: 1 !important;
    }

    .info {
        font-family: 'Open Sans', sans-serif;
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
        color: grey;
        position: relative;
        top: 30px;
        left: -46px;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .info-tog {
        color: #F5CC27;
        position: relative;
        top: 45px;
        opacity: 1;
    }

    #Sp .info .info-tog .active .active-2 .active-3 .ring .ring2 .click {
        transition: all .32s ease;
    }
</style>
    <script>
        $('.click').click(function() {
            if ($('#Sp').hasClass("fa-star")) {
                $('.click').removeClass('active')
                setTimeout(function() {
                    $('.click').removeClass('active-2')
                }, 30)
                $('.click').removeClass('active-3')
                setTimeout(function() {
                    $('#Sp').removeClass('fa-star')
                    $('#Sp').addClass('fa-star-o')
                }, 15)
            } else {
                $('.click').addClass('active')
                $('.click').addClass('active-2')
                setTimeout(function() {
                    $('#Sp').addClass('fa-star')
                    $('#Sp').removeClass('fa-star-o')
                }, 150)
                setTimeout(function() {
                    $('.click').addClass('active-3')
                }, 150)
                $('.info').addClass('info-tog')
                setTimeout(function(){
                    $('.info').removeClass('info-tog')
                },1000)
            }
        })
    </script>
@endsection

ممنون میشم اگر راهنمایی کنید