CSS star ranks with jquery backend

Counting total post count and generating ranking stars based on it

by Akram kamal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<dl class="postprofile" id="profile6"> <dt class="has-profile-rank has-avatar">
				<div class="avatar-container">
				<a href="./memberlist.php?mode=viewprofile&amp;u=2" class="avatar external"><img src="https://www.phpbb.com/community/download/file.php?avatar=1287833_1274550683.png" width="80" height="63" alt="User avatar"></a>														
                                </div>
	<a href="./memberlist.php?mode=viewprofile&amp;u=2" style="color: #AA0000;" class="username-coloured external">Max Pen</a>							</dt>

    <dd class="profile-rank">Site Admin</dd>
    <dd class="stars"> <span class="starbox1">
            <i class="fa fa-star star1"></i>
        </span>  <span class="starbox2">
        <i class="fa fa-star star2"></i>
            </span>  <span class="starbox3">
        <i class="fa fa-star star3"></i>
             </span>  <span class="starbox4">
        <i class="fa fa-star star4"></i>
             </span>  <span class="starbox5">
        <i class="fa fa-star star5"></i>
             </span>  <span class="starbox6">                     
         <i class="fa fa-star star6"></i>
             </span> 
    </dd>
    <dd class="profile-posts"><strong>Posts:</strong>
 <a href="./search.php?author_id=2&amp;sr=posts" class="external">42</a> 
    </dd>
    <dd class="profile-joined"><strong>Joined:</strong> Thu Apr 02, 2015 12:23 pm</dd>
    <dd class="profile-custom-field profile-phpbb_location"><strong>Location:</strong> Belgium, Flanders</dd>
    <dd class="profile-contact"></dd>
    <dl class="postprofile" id="profile6"> <dt class="has-profile-rank has-avatar">
				<div class="avatar-container">
				<a href="./memberlist.php?mode=viewprofile&amp;u=2" class="avatar external"><img src="https://www.phpbb.com/community/download/file.php?avatar=1287833_1274550683.png" width="80" height="63" alt="User avatar"></a>														
                      ...

CSS

* {
    font-family: fontawesome;
}
.stars {
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.55);
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.stars span {
    padding-left: 5px;
    padding-right: 5px;
    display: inline-block;
}
.star1 {
    color: #A8A2A2;
}
.starbox1 {
    border: 1px solid rgb(86, 86, 86);
    border-radius: 50%;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.42);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.57);
}
.star2 {
    color: #cd7f32;
}
.starbox2 {
    border: 1px solid rgb(86, 86, 86);
    border-radius: 50%;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.42);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.57);
}
.star3 {
    background: #d49250;
    /* Old browsers */
    background: -moz-linear-gradient(left, #d49250 50%, #c9c9c9 53%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(50%, #d49250), color-stop(53%, #c9c9c9));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #d49250 50%, #c9c9c9 53%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #d49250 50%, #c9c9c9 53%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #d49250 50%, #c9c9c9 53%);
    /* IE10+ */
    background: linear-gradient(to right, #d49250 50%, #c9c9c9 53%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d49250', endColorstr='#c9c9c9', GradientType=1);
    /* IE6-9 */
    color:transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.starbox3 {
    border: 1px solid rgb(86, 86, 86);
    border-radius: 50%;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.55);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.42);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.57);
}
.star4 {
    color: #c0c0c0;
}
.starbox4 {
    border: 1px solid rgb(86, 86, 86);
    border-radius:...

JavaScript

$(function () {
    $(".profile-posts a").each(function () {

        var posts = +$(this).text();
        var dl=$(this).closest(".postprofile")
        console.log(posts,dl)

        if (posts < 150) $(".starbox6",dl).hide()
        if (posts < 100) $(".starbox5",dl).hide()
        if (posts < 75) $(".starbox4",dl).hide()
        if (posts < 45) $(".starbox3",dl).hide()
        if (posts < 15) $(".starbox2",dl).hide()
    })
});