Uncaught ReferenceError: $ is not defined in MVC

Question

I have created a star rating form and on that form, it is supposed to show the average star rating based on how many ratings an item has, but when I run the code, the average does not show. When checking the console, it gives an Uncaught ReferenceError: $ is not defined error on the follow snippet:

<script>
    function SCRate() {
        for (var i = 1; i <= @totalRating; i++) {
            $("#sRate" + i).attr('class', 'starGlowN');
        }
    }
    $(function(){ //the error occurs here
        SCRate();
    });
</script>

Does anyone know what the problem could be?

My full code:

@model WebApplication2.Models.Article

@{
    ViewBag.Title = Model.Title;
    var comments = (IEnumerable<WebApplication2.Models.ArticlesComment>)ViewBag.Comments;
    var ratingSum = ViewBag.RatingSum;
    var ratingCount = ViewBag.RatingCount;

    decimal rating = 0;
    if (ratingCount > 0)
    {
        rating = (ratingSum / ratingCount);
    }
    var totalRating = decimal.Parse(rating.ToString());
}

<h2>@Model.Title</h2>
<div>
    <span class="starFadeN" id="sRate1"></span><span class="starFadeN" id="sRate2"></span><span class="starFadeN" id="sRate3"></span><span class="starFadeN" id="sRate4"></span><span class="starFadeN" id="sRate5"></span>
</div>
<div>
    <dl class="dl-horizontal">

        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Description)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Active)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Active)
        </dd>

    </dl>
</div>
@foreach (var c in comments)
{
    <hr />
    <div class="row">
        <div class="col-md-3">
            <i>@c.ThisDateTime</i>
            <br />
            @for (var i = 1; i <= c.Rating; i++)
            {
                <span class="starGlowN"></span>
            }
            @for (var i = (c.Rating + 1); i <= 5; i++)
            {
                <span class="starFadeN"></span>
            }
        </div>
        <div class="col-md-9">
            @Html.Raw(c.Comments.Replace("\n", "<br />"))


        </div>
    </div>
}
<hr />
@Html.Partial("_CommentBox")

<script>
    function SCRate() {
        for (var i = 1; i <= @totalRating; i++) {
            $("#sRate" + i).attr('class', 'starGlowN');
        }
    }
    $(function(){
        SCRate();
    });
</script>